Question

我有5个按钮，用户可以检查。暂时允许用户检查多个按钮的代码。 我希望，很快他们会点击第二个按钮，出现警告对话框，他们是否想要执行此过程，如果是，则会将checked class添加到所选按钮。

<form class="table_book">
<input id="block_book" type="button" value="first" class="checked">
<input id="block_book" type="button" value="second">
<input id="block_book" type="button" value="third">
<input id="block_book" type="button" value="fourth">
<input id="block_book" type="button" value="fifth">
</form>

$("input#block_book").live('click',function(){
  if($(".table_book #block_book").hasClass("checked").length > 1) {
     if(var conf = confirm('Are you sure want to select the button?'))
        // ajax process
     } else {
       // remove unchecked class 
     }
  }
})

Answer 1

第一项工作是将输入转换为使用公共类而不是ID

<强> HTML

<form class="table_book">
    <input class="block_book" type="button" value="first">
    <input class="block_book" type="button" value="second">
    <input class="block_book" type="button" value="third">
    <input class="block_book" type="button" value="fourth">
    <input class="block_book" type="button" value="fifth">
</form>

如果我已正确理解您的要求，那么此代码应该有效。第一个按钮可以自由选择。单击第二个按钮将发出提示以确认更改。

<强> JQ

$(function() {
    $("input.block_book").live('click', function() {
        var setClass = true;
        if ($("input.block_book.checked").length > 0)
            setClass = confirm('Are you sure want to select the button?');

        if (setClass) {
            // ajax process 
            $("input.block_book").removeClass("checked")
            $(this).addClass("checked")
        }
    });
});

Answer 2

我并不完全理解您在此尝试应用的逻辑（例如，他们对“您确定”的问题的答案是否确定是否可以检查多个方框？

此外，我不确定您要使用“if”确定的内容 - hasClass返回true或false，它不是选择器。

但要回答问题的实际标题，如何只检查一个，只需在点击事件中执行此操作即可。根据需要应用您想要的逻辑。

 $(".table_book #block_book.checked").removeClass("checked");
 $(this).addClass("checked");

http://jsfiddle.net/t3FNy/1/

如另一个答案所述 - ID应该是唯一的。虽然这可行，但这并不是一种好的做法，并且在此代码中根本没有任何附加值。

Answer 3

您的源代码中确实存在致命错误。所有按钮都有相同的ID。请改变它。

之后，还要修改$("form .table_book").find(":input[type='button']").live('click',function() {

的第一行

jquery只允许检查一个按钮

3 个答案: