javascript - Jquery - 选择复选框时按钮未启用

Question

我默认禁用了两个按钮，我希望在至少单击一个复选框后启用它们。但由于某种原因，我不确定为什么按钮没有被启用。我遵循了一些类似的 StackOverflow 问题的建议。这就是我所拥有的:

$('document').ready(function(){
    var checkboxes = $("input[type='checkbox']")
    checkboxes.click(function() {
        $('#seen').prop('disabled', !checkboxes.is(":checked"));
        $('#delete').prop('disabled', !checkboxes.is(":checked"));
});

user = $(location).attr('href').split('/').slice(-1)[0];
$.ajax({
url: '/userdata/' + user,
type: 'GET',
success: function (response) {
    var trHTML = '';
    var is_user = response.is_user;
    if (is_user === true) {
    $.each(response.links, function (i, item) {
        trHTML += '<tr><td style="text-align:center;" class="col-md-2"><input type="checkbox" value='+item.id+' name="link"/></td>' + 
                  '<td class="col-md-8"><a href="'+item.url+'">'+item.name+'</a></td><td style="text-align:center;" class="col-md-2">'+item.date+'</td></tr>';
    });
    $('.todolist').append(trHTML);
    }
    else {
        $.each(response.links, function (i, item) {
        trHTML += '<tr>' + 
                  '<td class="col-md-8"><a href="'+item.url+'">'+item.name+'</a></td><td style="text-align:center;" class="col-md-2">'+item.date+'</td></tr>';
    });
         $('.todolist').append(trHTML);
    }
}
});

});


function onClickSeen() {
/* declare an checkbox array */
var chkArray = [];

/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$( 'input[name="link"]:checked' ).each(function() {
    chkArray.push($(this).val());
});

/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',');

//alert("You have selected " + selected)

$.ajax({type: "POST",
            url: "/set-seen",
            data: { 'selected': selected },
            success:function(result){
                location.reload(true);
        }});
}

function onClickDelete() {
/* declare an checkbox array */
var chkArray = [];

/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$( 'input[name="link"]:checked' ).each(function() {
    chkArray.push($(this).val());
});

/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',');

//alert("You have selected " + selected)

$.ajax({type: "POST",
            url: "/delete-links",
            data: { 'selected': selected },
            success:function(result){
                location.reload(true);
        }});
}

这两个按钮的 HTML 如下所示:

<div class="btn-toolbar">
            <button type="button" class="btn btn-primary" onclick="onClickSeen()" id="seen" disabled>Mark as Seen</button>
            <button type="button" class="btn btn-danger" onclick="onClickDelete()" id="delete" disabled>Delete</button>
</div>

<table class="table table-striped table-bordered todolist">

</table>

我真的很感谢这里的一些帮助。我什至尝试用 on 方法替换 click 。

Answer 1

http://jsbin.com/rigubi/2/edit?html,js,output

您需要委托(delegate)您的点击，因为您动态生成复选框

使用 .on() 方法，例如

$("body"/*use rather a static parent ID here*/).on("click", "[name=someCkbName]", function() {

  var checkboxes = $("[name=someCkbName]"); // get all
  $('#seen, #delete').prop('disabled', !checkboxes.is(":checked"));

});

.on() 的故事是这样的:http://api.jquery.com/on/

$("staticSelector").on("eventName", "dynamicChildSelector", callbackFn);