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

How to make 2 groups of checkboxes mutually exlusive – Jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>

    <title>Document</title>
</head>
<body>
    <div id="div1" style="border:1px solid blue; width:300px;">
        <input class="sev" id="chk1" type="checkbox">
        <label for="chk1">Check 1</label>
        <input class="sev" id="chk2" type="checkbox">
        <label for="chk2">Check 2</label>
        <input class="sev" id="chk3" type="checkbox">
        <label for="chk3">Check 3</label>
    </div>

    <div id="div2" class="orphan"  style="border:1px solid green; width:300px; margin-top:50px;">
        <input class="orp" id="chk4"  type="checkbox">
        <label for="chk4">Check 4</label>
        <input class="orp" id="chk5" type="checkbox">
        <label for="chk5">Check 5</label>
        <input class="orp" id="chk6" type="checkbox">
        <label for="chk6">Check 6</label>
    </div>

</body>
</html>

Let’s say I have 2 divs with 3 checkboxes in each.

My goal is when user selects a checkbox in one of the groups, I want to disable the other group so no selections can be made. However I want to allow users to select as many checkboxes in one group as they want.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>

    <title>Document</title>
</head>
<body>
    <div id="div1"  style="border:1px solid blue; width:300px;">
        <input id="chk1" type="checkbox">
        <label for="chk1">Check 1</label>
        <input id="chk2" type="checkbox">
        <label for="chk2">Check 2</label>
        <input id="chk3" type="checkbox">
        <label for="chk3">Check 3</label>
    </div>

    <div id="div2"  style="border:1px solid green; width:300px; margin-top:50px;">
        <input id="chk4"  type="checkbox">
        <label for="chk4">Check 4</label>
        <input id="chk5" type="checkbox">
        <label for="chk5">Check 5</label>
        <input id="chk6" type="checkbox">
        <label for="chk6">Check 6</label>
    </div>

</body>
</html>

So if user checks chk1 in div1, disable all checkboxes in dev2.

I honestly am struggling with this and have no clue how to do this.

Okay I figured it out. It’s been about 2 years since i touched Jquery/JS so forgive me.

I put this together and it seems to work:

 $(document).ready(function(){

    $('.sev').on('change',function(){
      var isChecked = ($('.sev:checkbox:checked').length > 0) ? true : false;  
    $('#div2 input').prop('disabled',isChecked);
});

    $('.orp').on('change',function(){
       var isChecked = ($('.orp:checkbox:checked').length > 0) ? true : false;  
       $('#div1 input').prop('disabled',isChecked);
    });

 });

I guess my question would be how can I make this into a single handler? so I don’t have 2 separate handlres for 2 classes.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    $(document).ready(function(){

$('.sev').on('change',function(){
  var isChecked = ($('.sev:checkbox:checked').length > 0) ? true : false;  
$('#div2 input').prop('disabled',isChecked);
});

$('.orp').on('change',function(){
   var isChecked = ($('.orp:checkbox:checked').length > 0) ? true : false;  
   $('#div1 input').prop('disabled',isChecked);
});

 });

  2. 0

    If you add "chk1" class to your div1 inputs this JQuery code should achieve what you’re looking for:

                $(".chk1").on("input", function() {
                if ($(this)[0].checked) {
                    $("#div2 input").prop("disabled", true);
                } else {
                    $("#div2 input").prop("disabled", false);
                }
            });
    Login or Signup to reply.
  3. 0

    Here is how to do it with jQuery; basically listen for the change event on all checkboxes. Once the event occurs:

    • determine the div in which this occurred – thisDiv;
    • then derive the other div – otherDiv
    • Set the checkboxes of otherDiv‘s disabled property based on whether there are (or not) any checked checkboxes in thisDiv

    That’s it!

    $('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
    const thisDiv = $(this).parent();
    const otherDiv = $('#div1,#div2').not(thisDiv);
    otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});

    DEMO …

    $('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
    const thisDiv = $(this).parent();
    const otherDiv = $('#div1,#div2').not(thisDiv);
    otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>

    <title>Document</title>
</head>
<body>
    <div id="div1"  style="border:1px solid blue; width:300px;">
        <input id="chk1" type="checkbox">
        <label for="chk1">Check 1</label>
        <input id="chk2" type="checkbox">
        <label for="chk2">Check 2</label>
        <input id="chk3" type="checkbox">
        <label for="chk3">Check 3</label>
    </div>

    <div id="div2"  style="border:1px solid green; width:300px; margin-top:50px;">
        <input id="chk4"  type="checkbox">
        <label for="chk4">Check 4</label>
        <input id="chk5" type="checkbox">
        <label for="chk5">Check 5</label>
        <input id="chk6" type="checkbox">
        <label for="chk6">Check 6</label>
    </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search