编辑：

Question

我有以下代码：

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1)
        $(this).removeAttr("checked");
        alert( "Please selected one user at a time for editing." );
});
.
.
.
<tr>
    <td><input type="checkbox" name="user_id[]" value="1"></td>
    <td><input type="checkbox" name="user_id[]" value="2"></td>
    <td><input type="checkbox" name="user_id[]" value="3"></td>
</tr>
.
.
.
<input type="submit" name="submit" value="Edit Selected User" class="edit_user">

我正在使用复选框，因为还有其他选项可以选择多个项目。

但是，当用户选中要编辑的复选框时，我需要提醒他们，他们一次只能选中一个复选框。

我认为我对我的代码有正确的想法，但我会以错误的方式进行，因为它无法正常工作，只是继续正常处理页面。

建议？

对所选解决方案进行更新以及原因

对于下面的可行解决方案，一旦我添加：

$(document).ready(function() {

在我的工作示例中，他们开始工作。我选择了我所做的答案，因为在添加上述行后，我所需要的只是

return false;

行（以及内部if语句的正确括号），以阻止页面执行剩余的内容。

谢谢大家帮忙解决这个问题！

Answer 1

我认为你必须返回false：

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) {
        $(this).removeAttr("checked");
        alert( "Please selected one user at a time for editing." );

        return false;
    }
});

Answer 2

你的选择器错了。您使用的是$("input.edit_user")，但html中的输入没有类edit_user。

编辑：

对不起，看得不够仔细。这就是你需要的：

$('input[type="submit"]').on('click', function() {
    var $checkBoxes = $('input[type="checkbox"]');
    var checkCount = 0;

    $checkBoxes.each(function(){ if( this.checked ) checkCount++; });

    if( checkCount > 1 ) {
        $checkBoxes.removeAttr('checked');
        alert( 'Please selected one user at a time for editing.' );
    }
});

（fiddle）

Answer 3

这里有几件事：

当条件不满足时，您不会阻止click发布数据。例如，您可以使用return false;执行此操作。
if分支目前只有一行。缺少大括号？
复选框不一定具有checked属性。例如，他们没有这种情况。但是，单击复选框时更改的是其checked属性的值。应使用prop方法访问此内容。
if不会更改范围，因此$(this)指的是按钮，而不是复选框。

总而言之，更正后的脚本：

$("input.edit_user").click(function() {
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) {
        theCheckboxes.prop("checked", false);
        alert( "Please selected one user at a time for editing." );
        return false;
    }
});

Answer 4

您使用了错误的选择器。以下是适用于您的案例的jquery代码：

$(".edit_user").click(function () {
  var $checkboxes = $("input[type='checkbox']");
  if ($("input[type='checkbox']:checked").length > 1) {
    $("input[type='checkbox']").removeAttr("checked");
    alert("Please select one user at a time for editing.");
  }
});

这是工作小提琴：http://jsfiddle.net/639yH/

单击某个按钮时，只允许选中一个复选框

4 个答案:

编辑：