jQuery如果选中了一个复选框，则根据值禁用其他特定的复选框

Question

Here what I need is,

<div id="employeedetails-relation" class="check"><div class="checkbox">    <label><input type="checkbox" name="Employeedetails[relation][]" value="1"> Father</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="2"> Mother</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="3"> Spouse</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="4"> Child1</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="5"> Child2</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="6"> Father-in-law</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="7"> Mother-in-law</label></div></div>

Here if I check value 1 or 2 , then value 6 and 7 checkbox must get disabled. And the same way if I check value 6 or 7 , then checkbox value 1 and 2 must get disabled.

Suppose if I check value 3 first and then if I checked value 1 or 2, again value 6 and 7 must be get disabled.

If I unchecked value 1 and checked value 2, again value 6 and 7 must be get disabled, alternatively

My code:

$(\'input[type="checkbox"]\').click(function(){

        if (this.checked && this.value === "1") {
        $(\'#employeedetails-relation input[value="6"\').prop(\'disabled\', \'true\');
        $(\'#employeedetails-relation input[value="7"\').prop(\'disabled\', \'true\');
        } 
        elseif (!this.checked && this.value === "1")
        {
        $(\'#employeedetails-relation input[value="6"\').prop(\'disabled\', \'false\');
        $(\'#employeedetails-relation input[value="7"\').prop(\'disabled\', \'false\');
        }

Answer 1

Try this:

$(document).ready(function() {
    $('#employeedetails-relation').on('change', ':checkbox', function() {
        var value = parseInt($(this).val());

        var checkedEl = [];
        $(':checkbox:checked').each(function() {
            checkedEl.push(parseInt($(this).val()));
        });

        $('#employeedetails-relation :checkbox').prop('disabled', false);

        if ($.inArray(1, checkedEl) > -1 || $.inArray(2, checkedEl) > -1) {
            $(':checkbox[value=6]').prop('disabled', true);
            $(':checkbox[value=7]').prop('disabled', true);
        } else if ($.inArray(6, checkedEl) > -1 || $.inArray(7, checkedEl) > -1) {

            $(':checkbox[value=1]').prop('disabled', true);
            $(':checkbox[value=2]').prop('disabled', true);
        }

    });
});

Check Demo: https://jsfiddle.net/tusharj/0hoh109k/1/

Answer 2

you have multiple errors in your javascript code. remove the backslash in your jquery selectors as follows:

$('input[type="checkbox"]')

you also forgot the end brackets in your selectors:

$('#employeedetails-relation input[value="6"]')

elseif does not exist in javascript, replace it with:

else if

here you can find a workin example of your code http://jsfiddle.net/klickagent/up59vsdg/1/ .

Answer 3

You can have different click handlers for the set 1,2 or 6,7 then check whether any of those are checked and then set the disabled property

 var $checks12 = $('#employeedetails-relation').find('input[value="1"], input[value="2"]').click(function() { $checks67.prop('disabled', $checks12.is(':checked')); }); var $checks67 = $('#employeedetails-relation').find('input[value="6"], input[value="7"]').click(function() { $checks12.prop('disabled', $checks67.is(':checked')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="employeedetails-relation" class="check"> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="1"/> Father</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="2"/> Mother</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="3"/> Spouse</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="4"/> Child1</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="5"/> Child2</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="6"/> Father-in-law</label></div> <div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="7"/> Mother-in-law</label></div> </div> 

Answer 4

The Perfect and Tested solution ...Just copy and paste and check

  <!DOCTYPE html>

<html>
<head>
   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $(document).ready(function(){
      $('input[type="checkbox"]').click(function(){
      if($(this).val()==1 || $(this).val()==2 ){
      $('#checkbox6').attr('disabled','true');    
       $('#checkbox7').attr('disabled','true');    
      }
      })  
    // var check= document.getElementsByName('Employeedetails[relation][]');

   //  alert(check.val);
    });
    </script>
    <meta charset="windows-1252">
    <title></title>
</head>
<body>
    <?php
    // put your code here
    ?>
        <div id="employeedetails-relation" class="check"><div class="checkbox">    <label><input id="checkbox1" type="checkbox" name="Employeedetails[relation][]" value="1"> Father</label></div>

<div class="checkbox"><label><input id="checkbox2" type="checkbox" name="Employeedetails[relation][]" value="2"> Mother</label></div>
<div class="checkbox"><label><input id="checkbox3" type="checkbox" name="Employeedetails[relation][]" value="3"> Spouse</label></div>
<div class="checkbox"><label><input id="checkbox4" type="checkbox" name="Employeedetails[relation][]" value="4"> Child1</label></div>
<div class="checkbox"><label><input  id="checkbox5" type="checkbox" name="Employeedetails[relation][]" value="5"> Child2</label></div>
<div class="checkbox"><label><input   id="checkbox6" type="checkbox" name="Employeedetails[relation][]" value="6"> Father-in-law</label></div>
<div class="checkbox"><label><input id="checkbox7"  type="checkbox" name="Employeedetails[relation][]" value="7"> Mother-in-law</label></div>   </div>
      </body>
</html>