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

您需要委托您的點擊原因，您可以動態生成復選框

使用.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 ： .on()

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