HTML窗體：以編程方式禁用HTML表單中剩餘的選中框

Question

當我選擇大型複選框並在未選中時重新啓用時，下面的js腳本正確禁用了其餘兩個複選框。但是，有了這個邏輯，我需要爲每個特定的情況編碼。

而不是手動標記每個複選框與特定的ID和編碼禁用每種情況下的邏輯，有沒有辦法以編程方式禁用未檢查的複選框？

HTML

<div class="checkbox" id="sizes"> 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
    </div> 

JS

$(document).ready(function(){ 
$('input[id=a]').change(function(){ 
    if($(this).is(':checked')){ 
     $('input[id=a]').attr('disabled',false); 
     $('input[id=b]').attr('disabled',true); 
     $('input[id=c]').attr('disabled',true); 
    }else{ 
     $('input[id=a]').attr('disabled',false); 
     $('input[id=b]').attr('disabled',false); 
     $('input[id=c]').attr('disabled',false); 
     } 
    }); 
}) 

Answer 1

您可以禁用所有有用在div sizes內的複選框除了下面的當前一個：

HTML：

<div class="checkbox" id="sizes"> 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
</div> 

JQUERY：

$(document).ready(function(){ 
    $('#sizes input[type=checkbox]').change(function(){ 
    if($(this).is(':checked')){ 
     $("#sizes").find(':checkbox').not($(this)).attr('disabled',true); 
     } 
     else{ 
     $("#sizes").find(':checkbox').attr('disabled',false); 
    } 
    }); 
}); 

jsfiddle Demo

Answer 2

我認爲這是可以

$(document).ready(function(){ 
 
    
 
    $('.checkbox input[type=checkbox]').change(function(){  
 
     
 
     $('input[id=a]').attr('disabled',true); 
 
     $('input[id=b]').attr('disabled',true); 
 
     $('input[id=c]').attr('disabled',true); 
 
     
 
     if($(this).is(':checked')){ 
 
      $('input[id='+this.id+']').attr('disabled',false); 
 
     } 
 
     else 
 
     { 
 
      $('input[id=a]').attr('disabled',false); 
 
      $('input[id=b]').attr('disabled',false); 
 
      $('input[id=c]').attr('disabled',false); 
 
     } 
 
    }); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox" id="sizes"> 
 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
 
</div>

Answer 3

HTML

<div class="checkbox" id="sizes"> 
    <label><input id="a" class="checkbox1" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" class="checkbox1" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" class="checkbox1" type="checkbox" name="small"value="1">Small</label> 
</div> 

的jQuery

$(document).ready(function(){ 
    $('.checkbox1').change(function(){ 
     if($(this).is(":checked")){ 
      $('.checkbox1').attr('disabled','disabled'); 
      $(this).removeAttr('disabled'); 
     }else{ 
      $('.checkbox1').removeAttr('disabled');; 
     } 
    }); 
})