0

我正在使用下面的 jquery 脚本来禁止用户一次选择多个同名的复选框

 $("input:checkbox").click(function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

这是复选框

 <div class="ChekMarkWrap">
  <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
 </div>

 <div class="ChekMarkWrap">
  <input id="chkTv_4" type="checkbox" name="four" /><br />tv
 </div>

 <div class="ChekMarkWrap">
  <input id="chkWeb_4" type="checkbox" name="four" /><br />web
 </div>

 <div class="ChekMarkWrap">
  <input id="chkStage_4" type="checkbox" name="four" /><br />stage
 </div>

在我动态添加一个新复选框之前，它运行良好。我将上面的 jquery 脚本绑定到document.ready()

4

4 回答 4

3

小提琴：http: //jsfiddle.net/3hcFp/2/

该方法只绑定click事件一次，因此在该代码运行后添加的元素将不会绑定事件。您需要做的是设置一个侦听器，如下所示：

$('body').on('click', 'input:checkbox', function () {
    // Do some stuff
}

在小提琴中，我将复选框包装在 a 中form#exampleForm，并在上面的示例中用它替换body。

编辑：更新了添加更多复选框的实时示例。

于 2013-08-12T07:50:51.783 回答
2

试试这样：

$("body").on('click',input:checkbox,function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

添加新内容时，您需要将其附加到 DOM。

但是您可以定位一个在加载 DOM 后未添加的父元素，以便能够使用.on()引用/附加事件到它并传递选择器，正如我在上面在代码的第一行中所写的那样。

于 2013-08-12T07:48:31.700 回答
0

您应该使用委托事件。您的代码正在运行document ready。没有任何东西与新元素绑定。

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});
于 2013-08-12T07:50:44.423 回答
0

您可以尝试使用委托。像这样的东西：

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

供参考：jQuery 文档

于 2013-08-12T07:52:01.553 回答