Question

我从今天早上开始尝试使用jQuery创建代码，允许在单击复选框时启用/禁用提交按钮。我试图将所有这些代码写入一个将在每个单击调用的函数中。

问题是它在JSFiddle上工作正常，但在我的计算机上一次启用按钮我不能通过取消选中所有复选框再次禁用它。

您有任何想法解决此问题吗？

谢谢你的到来。

这是我的代码：

＆＃13;

function activeBouton() {
  var countChecked = function() {
    var n = $( "input:checked" ).length;
 	if (n == 0) jQuery('button').prop('disabled', true);
	else jQuery('button').prop('disabled', false);
  };
  countChecked(); 
  $( "input[type=checkbox]" ).on( "click", countChecked );      
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div onclick="activeBouton()">
  <input type="checkbox" name="nom" value="1" /> Item un
  <input type="checkbox" name="nom" value="2" /> Item deux
  <input type="checkbox" name="nom" value="3" /> Item trois
</div>
<button id="activeBtn" disabled>Add</button>

＆＃13;

Answer 1

您分享的代码段有点令人困惑。 activeBouton的{{1}}处理程序附加了click函数，该div处理程序正在调用countChecked()＆amp;如果checkbox

中有任何更改，也会调用此方法

可以简化。除此之外，LOAD TYPE，onLoad，onDOMReady和body之间存在重大差异。 jsfiddle中的head。因此，当您在浏览器中运行代码时，可以显示您将代码放在何处，这将会很有帮助

希望此代码段有用

function countChecked() {
  if ($('input[name="nom"]:checked').length > 0 && $("#activeBtn").is(':disabled')) {
        $("#activeBtn").removeAttr('disabled')
    } else if ($('input[name="nom"]:checked').length == 0) {
       $("#activeBtn").attr('disabled', true)
    }
};
$('input[name="nom"]').on("change", function(event) {
    countChecked(); // Call countChecked event on change in checkbox
});

选中此jsfiddle

Answer 2

当我试图操作你的小提琴时，我收到以下错误。

未捕获的ReferenceError：未定义activeBouton。

当您已经使用jQuery将单击事件绑定到各个复选框时，不确定为什么要尝试将click事件绑定到具有onclick属性的div。

尝试这样做：

$(document).ready(function() {
  var countChecked = function() {
    var n = $("input:checked").length;
    if (n == 0) jQuery('button').prop('disabled', true);
    else jQuery('button').prop('disabled', false);
  };

  $("input[type=checkbox]").on("click", countChecked);
});

并删除周围onclick的{{1}}属性。

更新了fiddle。

根据复选框启用/禁用按钮

2 个答案: