选中后禁用复选框

Disabling checkboxes after checked

本文关键字：复选框      更新时间：2023-12-26

我有一个复选框列表，每个复选框都与表中的一行有关。每行属于一个客户端。我已使用客户端名称作为复选框的类。我只需要在勾选第一个复选框后启用共享同一类的复选框。

<input class="Alexander David" type="checkbox" value="Domain-9" name="bill[]" id="bill[]" onchange="check();">
<input class="Alexander David" type="checkbox" value="Domain-10" name="bill[]" id="bill[]" onchange="check();">
<input class="Alexander David" type="checkbox" value="Domain-11" name="bill[]" id="bill[]" onchange="check();">
<input class="John Doe" type="checkbox" value="Domain-12" name="bill[]" id="bill[]" onchange="check();">

function check(){
    $("#bill").on("change", function() {
        if ($('#bill').attr('class') !== $(this).attr("class")) {
            $(".bill").attr("class").prop("disabled", false);
        } else {
            $("#bill").prop("disabled", true);
        }
    });
}

试试这个：

 $('input[name*=bill]').change(function() {
   $t = $(this);
   var $th = $(this).attr('class');
   if ($(this).is(':checked')) {
     $('input[name*=bill]').each(function() {
       if ($(this).attr('class') != $th) {
         $(this).not($t).prop('disabled', true);
       }
     });
   } else {
     $('input[name*=bill]').each(function() {
       if ($(this).attr('class') != $th) {
         $(this).not($t).prop('disabled', false);
       }
     });
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="Alexander David" type="checkbox" value="Domain-9" name="bill[]">
<input class="Alexander David" type="checkbox" value="Domain-10" name="bill[]">
<input class="Alexander David" type="checkbox" value="Domain-11" name="bill[]">
<input class="John Doe" type="checkbox" value="Domain-12" name="bill[]">

试试这个：

disabled是property而不是attribute，所以使用prop而不是attr。

<script>
function check(){
$("[name='bill']").on("change", function() {
if ($("[name='bill']").attr('class') !== $(this).className()) {
$("[name='bill']").prop('disabled', true); 
} else {
$("[name='bill']").prop('disabled', false); 
}
});
}
</script>

使用 classNames 可能会有问题(因为空格(。请考虑改用data属性。

在此示例中，我们切换所有匹配输入的 disabled 属性：

$(function(){
  
  $("input[type=checkbox]").on("change",function(){
      var $this = $(this),
          thisIdent = $this.data("ident");
      $("[data-ident='"+thisIdent+"']").not($this).prop("disabled",$this.is(":checked"));
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-ident="Alexander David" type="checkbox" value="Domain-9"    name="bill[]">
<input data-ident="Alexander David" type="checkbox" value="Domain-10" name="bill[]">
<input data-ident="Alexander David" type="checkbox" value="Domain-11" name="bill[]">
<input data-ident="John Doe" type="checkbox" value="Domain-12" name="bill[]">

嘿，

你可以试试我的代码：我已经对您的代码进行了一些更改，它将帮助您：

<input class="bill" client="Alexander David" value="Domain-9" name="bill[]" type="checkbox">
<input client="Alexander David" value="Domain-10" name="bill[]" class="bill" type="checkbox">
<input client="Alexander David" value="Domain-11" name="bill[]" class="bill" type="checkbox">
<input client="John Doe" value="Domain-12" name="bill[]" class="bill" type="checkbox">
<script>    
$(document).ready(function(){
    $('.bill').change(function(){
      var client = $(this).attr('client');
      if($(this).is(':checked'))
      {
        $('input[client='+client+']').attr('disabled', 'disabled');
        $(this).removeAttr('disabled');
      }
      else
       $('input[client='+client+']').removeAttr('disabled');
    });
});
<script>

您正在使用#bill执行onChange函数，这意味着bill是一个ID。但是在您的 HTML 中，它是元素的名称，复选框中没有 ID。所以你的代码不起作用。

再次禁用元素时单击/更改/检查 - 没有事件将对其起作用。因此，您必须考虑一些替代方法，例如将类放在复选框上以使其感觉像禁用。

<input class="billCheck Alexander David" type="checkbox" value="Domain-9"    name="bill[]">
<input class="billCheck Alexander David" type="checkbox" value="Domain-10" name="bill[]">
<input class="billCheck Alexander David" type="checkbox" value="Domain-11" name="bill[]">
<input class="billCheck John Doe" type="checkbox" value="Domain-12" name="bill[]">

<script type="text/javascript" >
        $(".billCheck").on("click", function() {
              if ($(this).is(":checked")) {
                $(this).addClass("disabled");
              } else {
                $(this).removeClass("disabled");
              }
         });
        $('input.disabled').on('click', function(evt) {
               evt.preventDefault();
        });
    </script>
    <style>
        input.disabled {
           opacity : .50;
           filter  : alpha(opacity=50); /* IE<9 */
           cursor  : default;
        }
    </style>

我认为这与您想要的相匹配。

相关文章：