0

我有以下代码：

$("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 语句中的括号）以阻止页面执行剩余的内容。

感谢大家帮助解决这个问题！

4

4 回答 4

2

我认为你必须返回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;
    }
});
于 2013-11-13T20:21:46.520 回答
1

你的选择器是错误的。您正在使用$("input.edit_user")，但您的 html 中的输入没有 class 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.' );
    }
});

（小提琴）

于 2013-11-13T20:19:50.287 回答
1

这里有几件事：

  1. click当条件不满足时，您不会停止发布数据。例如，您可以这样做return false;。
  2. if分行目前​​只有一条线。缺少大括号？
  3. 复选框不必具有checked属性。例如，在您的情况下他们没有这种情况。但是，单击复选框时会发生变化的是其checked属性的值。这应该通过prop方法访问。
  4. 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;
    }
});
于 2013-11-13T20:26:56.827 回答
1

您使用了错误的选择器。这是适用于您的情况的 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/

于 2013-11-13T21:02:46.330 回答