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

对于第一部分，使用此代码进行追加。

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

Answer 2

试试这个：

var Row = $('#checkbox'); // address the destination by id
Row.append('<input type="checkbox" class="Bike">Check Me'); // use class instead of id

Answer 3

您可以将此代码用于不同的ID，并计算文本框的数量

    var count = 0;
$("#add").click(function(){
    var count = $('#checkbox input').length;
    if(count < 11) {
        $("#checkbox").append('<input type="checkbox" id="'+ (count+1) +'">Check Me');
        count++;
    }
});

Answer 4

这应该为你做。 http://jsfiddle.net/jByt3/10/

$("#add").on("click", function () {
    alert("Click Successful");
    if ( $('#checkbox input[type="checkbox"]').length < 10 ) {
        $('#checkbox').append('<input type="checkbox" id="Bike">Check Me');
    }
});

附注：

当你想使用id时，你应该这样称呼它。

$('#id')

当你想使用一个类时，你应该这样调用它。

$('.class')

请不要使用整个html标记来引用元素。

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

4 个答案:

Full Demo