Question

如果选中任何复选框，我想启用该按钮。否则，如果没有选中，我想禁用该按钮。

的jQuery

	$(document).ready(function() {
  $('.check_list').change(function() {
    if ($(".check_list input:checkbox:checked").length > 0){
      $(".btn").attr('disabled','disabled');
    } else {
      $(".btn").removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">

<button class="btn" disabled> Button</button>

检查按钮时有效。但是当我取消选中它仍然启用的所有内容时。但它应该被禁用

Answer 1

您的CSS选择器错误。除非您知道自己在做什么，否则请使用prop代替attr。

＆＃13;

var $checklist = $('.check_list').change(function() {
  $(".btn").prop('disabled', !$checklist.is(":checked"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">
<button class="btn" disabled> Button</button>

＆＃13;

Answer 2

您的JS代码中存在两个问题。第一个是选择器，第二个是您尝试更改禁用属性的方式，您应该使用prop。

＆＃13;

$('.check_list').change(function() {
  if ($('.check_list:checked').length > 0) {
    $('.btn').prop('disabled', false);
  } else {
    $('.btn').prop('disabled', true);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">

<button class="btn" disabled> Button</button>

＆＃13;

Answer 3

看起来你需要

使用属性（而不是属性）
调整选择器

请参阅下面的代码示例

$(document).ready(function() {
  // init button
  $(".btn").prop('disabled', true);

  $('.check_list').change(function() {
    var numOfCheckedBoxes=0;
    $.each($(".check_list"), function(i, v) {
      
      if ($(v).is(":checked")) {
        numOfCheckedBoxes++;
      }
    });
    
    
    $(".btn").prop('disabled', (numOfCheckedBoxes==0));

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">


<button class="btn">Button</button>

如何检测我的复选框中是否有任何内容？

3 个答案: