Question 257949 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Disable other checkboxes when checkbox with the same sales code is already checked

Can someone help me with this one?

enter image description here

I have this list in my table with checkbox. As you can see there are duplicate sales code.

What I’m trying to do is that if I check one row, the other checkbox row with similar sales code should be disabled like this. And then i should also be able to check other rows with different sales code.

enter image description here

Thanks in advance!

Tags:

2

Answers


  1. 0

    Set the disabled property of your other HTMLInputElements (your checkboxes) to the current checked state in an input event listener. Here’s a code sample with optionA and optionB as the checkboxes:

    optionA.addEventListener('input', () => {
    optionB.disabled = optionA.checked;
});
optionB.addEventListener('input', () => {
    optionA.disabled = optionB.checked;
});

    Every time a user checks or unchecks a checkbox, it raises the corresponding event. If the checked state is true, set the disabled property on the other checkbox to true. If the checked state is false, or unchecked, set the disabled property on the other checkbox to false to re-enable it.

    Login or Signup to reply.
  2. 0

    Need more details on how you are rendering your HTML as well.
    What you can do is, add an event listener for your checkbox (may be based on class name), but add your custom attribute to the checkbox as well and assign your sales code value to that custom attribute

    I’ve added a working code snippet, you can improve it according to your needs

    $(document).ready(function(){

  $(".salesCodeChk").change(function(){
       var salesCode = $(this).attr("sales-code");  
       $(".salesCodeChk").prop("disabled", false);
       if(this.checked){
          
          $("[sales-code='" + salesCode + "']").not(this).prop("disabled",true);
       }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="salesCodeChk" sales-code="ISK12345"/>ISK12345</br>
<input type="checkbox" class="salesCodeChk" sales-code="ISK12345"/>ISK12345</br>
<input type="checkbox" class="salesCodeChk" sales-code="ISK123456"/>ISK123456
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search