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

我认为这很有用

＆＃13;

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

＆＃13;

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

＆＃13;

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');;
        }
    }); 
})

HTML表单：以编程方式禁用HTML表单中的剩余已检查框

3 个答案: