jquery只允许一个按钮被检查
我有5个按钮,用户可以检查。一会儿代码允许用户检查多于1个按钮。 我想,很快他们点击第二个按钮,出现警告对话框,看他们是否想要进行这个过程,如果是,它会将checked class
添加到选定的按钮。jquery只允许一个按钮被检查
<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
}
}
})
的第一份工作是将输入转换为使用通用类,而不是一个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")
}
});
});
实际上在您的源代码中有一个致命错误。所有按钮都有相同的ID。请改变它。
之后也修改第一行$("form .table_book").find(":input[type='button']").live('click',function() {
改进:将$(“form .table_book”)的结果存储在一个额外的变量中,以便您可以多次使用它。甚至可以计算“检查”的班级数量。 – reporter 2011-04-28 14:29:07
我不完全理解你正试图在这里应用逻辑(例如做他们的答案,“你确定”的问题确定是否不超过一个箱子可以进行检查
而且,我不知道你想确定在“条件”是什么? - hasClass
回报true
或false
,这不是一个选择
但是,为了回答实际。你的问题的标题,如何检查只有一个,理由t在点击事件中执行此操作。根据需要应用你想要的逻辑。
$(".table_book #block_book.checked").removeClass("checked");
$(this).addClass("checked");
作为另一个答案noted- ID应该是唯一的。虽然这会起作用,但这不是一种好的做法,并且在此代码中根本没有附加值。
ID必须是相同的。如果你想让他们共享这样的类型,请使用'class'。 – Spudley 2011-04-28 14:32:42