jQuery的，如果一個複選框被選中，禁用基於價值

Question

這裏我需要的是，

<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> 

在這裏，如果我檢查值 或 ，則看重其他特定複選框和 複選框必須禁用。如果我檢查值以同樣的方式 或 ，則複選框值 和 必須得到禁止。

假設如果我先檢查值3，然後如果檢查值1或2，則值6和7必須被禁用。

如果我未選中值1，檢查值2，再次重視6和7必須得到禁止，或者

我的代碼：

$(\'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

你可以有不同的點擊處理程序設置的1,2或6,7然後檢查是否有任何的那些檢查，然後設置disabled屬性

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 2

你有你的JavaScript代碼的多個錯誤。刪除反斜槓在你的jQuery選擇如下：

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

你也忘了到底架在你的選擇：

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

ELSEIF不於JavaScript中，將其替換爲：

else if 

在這裏你可以找到一個你的代碼http://jsfiddle.net/klickagent/up59vsdg/1/的例子。

Answer 3

試試這個：

$(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); 
     } 

    }); 
}); 

檢查演示：https://jsfiddle.net/tusharj/0hoh109k/1/

Answer 4

的完善和測試的解決方案...只是複製和粘貼，並檢查

<!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>