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

您需要委派你的點擊，因爲你dymanically產生的複選框

使用.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);