javascript - 检查条件后使用 jQuery 取消选中框

Question

我正在使用 .append 在单击按钮时附加一个新的复选框。 On Click 事件有效，但代码存在一些问题。此外，如果用户单击第 11 个复选框，我必须显示一条错误消息并取消选中该复选框。我怎样才能使用 jQuery 做到这一点？这是 FIDDLE.和代码:

HTML:

    <button id="add">Add Checkbox</button>
    <div id="checkbox"></div>

jQuery:

    $("#add").on("click", function () {
        alert("Click Successful");
        var Row = $('<div id="checkbox"> </div>');
        Row.append('<input type="checkbox" id="Bike">Check Me');
    });

Answer 1

Updated Demo

对于第 I 部分，使用此代码追加。

var row = $('#checkbox'); - <强> Id based selector 。

而不是 $('<div id="checkbox"> </div>'); - 它创建新的 DOM 元素。

$("#add").on("click", function () {
    alert("Click Successful");
    var Row = $('#checkbox');
    Row.append('<input type="checkbox" class="Bike">Check Me');
                   //                  ^ change ID to class to avoid duplicates
});

备注:id="Bike"在每个附加上都被复制。所以，使用 class="Bike"

---

对于第二部分，使用 eq(10)获得第 11 个复选框 - eq() 。

和:gt(9)大于 10。

$(document).on('change','.Bike:gt(9)',function(){

    if(this.checked){                 //check if checked
          alert('greater than 10 checkbox');
          this.checked = false;       //uncheck the checkbox
    }
});

Full Demo