javascript - 禁用表中带有复选框的按钮

Question

我有一个数据数组，其中每一行都有一个复选框，用户可以选中该复选框来选择一行。我想这样做，如果没有选择任何行，“删除”按钮将被禁用。

该按钮在页面加载时被禁用，并且第 1 行上的复选框按计划工作，但如果表包含 2 行或更多行，则其余行不会。

这是我到目前为止所拥有的:

<button class="btn btn-default modal-opener" id="chkboxdelbtn" onchange="toggle();" type="button" type="submit">Delete Selection</button>

<?php 
    $row = get_member_tskey_info($mysqli);
    $i = 0;
    foreach ($row as $r){
        echo '<tr><td style="padding-right:0px;">';

        if (($i<=2) && ($r['status'] == 1)){        
            echo '<input type="checkbox" name="keyselect[]" id="keyselect[]" value="' . $r['uid'] . '" /></td>';                                                
        }else{
            echo '<input type="checkbox" disabled="disabled" value="" /></td>';
        }
        ...

Javascript:

document.getElementById('chkboxdelbtn').disabled = true;
function toggle() {
    if (document.getElementById('keyselect[]').checked == true) {
        document.getElementById('chkboxdelbtn').disabled = false;
    } else {
        document.getElementById('chkboxdelbtn').disabled = true;
    }
}

Answer 1

ID 必须是唯一的。使用类来代替。

foreach ($row as $r){
    echo '<tr><td style="padding-right:0px;">';

    if (($i<=2) && ($r['status'] == 1)){        
        echo '<input type="checkbox" name="keyselect[]" class="keyselect" value="' . $r['uid'] . '" /></td>';                                                
    }else{
        echo '<input type="checkbox" disabled="disabled" value="" /></td>';
    }

Javascript:

document.getElementsById('chkboxdelbtn').disabled = true;
function toggle(){
    var keyselects = document.getElementsByClassName('keyselect');
    for (var i = 0; i < keyselects.length; i++) {
        if (keyselects[i].checked == true) {
            document.getElementById('chkboxdelbtn').disabled = false;
            break;
        }
    }
}