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;
        }
    }
}

Answer 2

请注意checkbox上的重复ID。它不可能发生。实际上，您甚至不需要该复选框的ID，因为您可以使用toggle()使querySelectorAll()函数更简单：

function toggle() {
    document.getElementById('chkboxdelbtn').disabled = 
       ( document.querySelectorAll("input[type='checkbox']:checked").length <= 0 );
}

这将查找已选中的所有输入复选框，并查看是否至少有一个。如果没有，它就会被禁用。

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

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

2 个答案: