how to disable a button until a checkbox has been selected

Question

I am using checkbox which is displayed in a while loop. But i want to disable my remove button before any checkbox is checked.i am facing difficulty as i have stored checkbox name as an array. How to do that. my code is

<form action="delete_mock.php" method="POST">
<table border="1" style ="width:100%">
<caption>Mock Test Details of   <span style="color:red;font-weight:bolder"><?php echo $class_name_to_delete;?></span>&nbsp;Section&nbsp;<span style="color:red;font-weight:bolder"><?php echo $section_name_to_delete;?></span>&nbsp;&nbsp;<span style="color:red;font-weight:bolder"><?php echo $school_name_to_delete;?></span>&nbsp; students</caption>
    <tr>
    <th>Mock ID</th>
    <th>Mock Name</th>
    <th>No. of sections</th>
    <th>Select to <span  STYLE= "color:red">DELETE</span></th>
    <th>Click to SHOW Questions</th>
    </tr>
    <?php
        while($row = mysqli_fetch_array($result))
        {
        ?>

            <tr>
            <td style ="text-align:center;"> <?php echo $row['mock_id'];?></td>
            <td style ="text-align:center;"> <?php echo $row['mock_name'];?></td>
            <td style ="text-align:center;"> <?php echo $row['num_of_sections'];?></td>
            <td style ="text-align:center;"> <input type = "checkbox" class="checkbox" name = "todelete[]"  value = <?php echo $row['mock_id'];?>/></td>
            <?php

             echo '<td style ="text-align:center;"><a href = "pass.php?id='.$row['mock_id'].'" target ="_blank" style="text-decoration:none">SHOW</a></td>';
            ?>
            </tr>

        <?php
        }
    ?>
</table>
<br /><br /> <br />
<input type="submit"id="removemock" value= "Remove"  name= "remove" STYLE= "font-weight: bold; color: white; height: 2em; background-color: #3778BD;position:absolute;left:680px">
</form>
<form action ="school.php" method="POST">
<input type="submit" value= "   Back   "  name= "backtable" STYLE= "font-weight: bold; color: white; height: 2em; background-color: #3778BD;position:absolute;left:600px">
</form>

Please help me ????

Use the disabled attribute of the button tag. Possible duplicate of http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript — Shilly, Jul 17 '15 at 13:07
could you replicate the same on jsfiddle. http://jsfiddle.net — dreamweiver, Jul 17 '15 at 13:11

score 1 · Accepted Answer · answered Jul 17 '15 at 13:10

Try something like this:

$('.checkbox').change(function() {

     // lets see how many checkboxes are selected
     var checked = $('.checkbox:checked').length;

     // show / hide button
     if (checked > 0) {
          // show button
          $('#removemock').show();
     } else {
          //hide button
          $('#removemock').hide();
     }

});

score 1 · Answer 2 · answered Jul 17 '15 at 13:10

by default disable your remove button adding the "disabled" property then with jquery:

$('.checkbox').on("change",function(){
       if($('.checkbox:checked').length>0)
           $('#removemock').prop("disabled",false);
       else
           $('#removemock').prop("disabled",true);
});

how to disable a button until a checkbox has been selected

2 Answers2