Disable button with checkbox in table

Question

I have an array of data on which each row has a checkbox which the user can check to select a row. I want to make it so that if no row is selected, the "delete" button will be disabled.

The button gets disabled on page load, and the checkbox on row 1 works as planned, but if the table contains 2 or more rows the rest don't.

This is what I have so far:

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

Barmar · Accepted Answer · 2014-09-15 21:41:31Z

2

IDs have to be unique. Use a class instead.

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

answered Sep 15, 2014 at 21:41

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LcSalazar · Accepted Answer · 2014-09-15 21:42:41Z

1

Be aware for the duplicate ID's on your checkbox. It cannot happen. Actually, you wouldn't even need an id to the checkbox, as you can make your toggle() function much simpler with querySelectorAll():

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

This will look for all input checkboxes that are checked, and see if there's at least one. If not, it get's disabled.

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

answered Sep 15, 2014 at 21:42

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Collectives™ on Stack Overflow

Disable button with checkbox in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related