how to check if checkboxes are checked or not inside table

Question

User-1634604574 posted

i have this table i want to check if checkboxes are checked enable that buton else disable that button

<table id="tb_employee">

<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

</table>

<input type="button" id="b1">

<script>

$("#tb_employee").off("change", "td").on("change", "td", function () {
            $('#tb_employee [type="checkbox"]').each(function (i, chk) {
                if (chk.checked) {
                    $("#b1").prop("disabled", false);
                
                }

                if (!(chk.checked)) {
                    $("#b1").prop("disabled", true);
                   
                }
            });
        })
</script>

i wrote that script but is not working fine when checkboxes are not checked

Answer 1

User288213138 posted

Hi zhyanadil,

According to your description, I made a demo for your reference.

On the  <input> tag, if you want to disable button, you should set disabled= "disabled" instead of false.

The code:

<script>
        $(document).ready(function () {
            $('input[type="checkbox"]').click(function () {
                if ($(this).prop("checked") == true) {
                    $("#b1").prop("disabled", "disabled");
                }
                
            });
        });   
    </script>
<table id="tb_employee">
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
    <input type="button" id="b1" value="button" >

The result:

Best regards,

Sam

Answer 2

User-2054057000 posted

You can simple get the count of checked checkboxes from jQuery Selector and then either disable or enable your button. See the below video for it's working:

The code:

<table id="tb_employee">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
</table>

<input type="button" id="b1" value="Click">

$("input[type='checkbox']").change(function () {
    if ($("input[type='checkbox']:checked").length > 0)
        $("#b1").prop("disabled", false);
    else
        $("#b1").prop("disabled", true);
});

Hope it helps.