CODEWITHSUNDEEP
javascripthtml
Mee
Mee

Reputation: 825

Enabled/disabled buttons when one checkbox or more are checked

To do this, I have a javascript file that count how many checkboxes in my form are checked, then:

But in reality all of them stay disabled no matter what I do, so I wonder what I did wrong here. Here is my code:

html:

 <form action="" name="tform" method="POST">
            <table>
                <tr>
                    <td colspan="2">
                    </td>
                    <td colspan="3" align="right">
                        <input type="text" name="search_value" size="35"/><input type="submit" name="Search_clicked" value="Search"/>
                    </td>
                </tr>

                <tr>
                    <td colspan="5">
                        <table class="sortable" id="sortable_example" border="2">
                            <tr>
                            <th class="unsortable">Select</th>
                            <th>UserID</th>
                            <th>User name</th>
                            <th>Enable/Disable</th>
                            <th>Start date</th>
                            <th>End date</th>
                            </tr>

                                            <tr>
                <td><input type="checkbox" name="userid[]" value="1"/></td>
                <td>00001</td>
                <td>trang</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="11"/></td>
                <td>00011</td>
                <td>[email protected]</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="12"/></td>
                <td>00012</td>
                <td>[email protected]</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="13"/></td>
                <td>00013</td>
                <td>congchua_cambuagietchim@yahoo.</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="14"/></td>
                <td>00014</td>
                <td>[email protected]</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="15"/></td>
                <td>00015</td>
                <td>[email protected]</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>                <tr>
                <td><input type="checkbox" name="userid[]" value="16"/></td>
                <td>00016</td>
                <td>[email protected]</td>
                <td>Enable</td>
                <td>dd/mm/YYYY</td>
                <td>dd/mm/YYYY</td>
            </tr>

                        </table>
                    </td>
                </tr>

                <tr height="100px">
                    <td><input type="submit" name="Add_clicked" value="Add"/></td>
                    <td><input type="submit" name="Add_massively_clicked" value="Add massively"/></td>
                    <td><input type="submit" name="Change_clicked" disabled value="Change"/></td>
                    <td><input type="submit" name="Delete_clicked" disabled onclick="return confirm('Are you sure?');" value="Delete"/></td>
                    <td><input type="submit" name="Reset_password_clicked" disabled onclick="return confirm('Are you sure?');" value="Reset password"/></td>
                </tr>
            </table>     
            </form>

and javascript:

var obj;
var count=0;
var Change = document.getElementsByName('Change_clicked')[0];
var Delete = document.getElementsByName('Delete_clicked')[0];
var Reset_password = document.getElementsByName('Reset_password_clicked')[0];
    for (var i=0; i<tform.elements.length; i++) {
      obj = tform.elements[i];
      if (obj.type == "checkbox" && obj.checked) {
        count++;
      }
    }

if(count==0){
    Change.disabled=true;
    Delete.disabled=true;
    Reset_password.disabled=true;
}
if(count==1){
    Change.disabled=false;
    Delete.disabled=false;
    Reset_password.disabled=false;
}
if(count>1){
    Change.disabled=true;
    Delete.disabled=false;
    Reset_password.disabled=false;
}

Thank you for any help!

Upvotes: 0

Views: 1233

Answers (2)

Dropout
Dropout

Reputation: 13866

Try instead of using:

<input type="submit" name="Change_clicked" disabled value="Change"/>

just:

<input type="submit" name="Change_clicked" value="Change"/>

for each button and then on document.ready and onclick() event within a checkbox check the amount of enabled check boxes. Then apply your settings from your function.

Also instead of using

var Change = document.getElementsByName('Change_clicked')[0];

just use ids with your elements because they are present only once:

var Change = document.getElementsById('Change_clicked');

Edit: instead of onclick() trigger the function by onChange(), kudos to @Praveen

Upvotes: 1

Praveen
Praveen

Reputation: 56539

Your code is fine, the only thing you missed to wrap it to a function and add an event handler.

1) Using onchange event handler, for your checkboxes

example: 

<input type="checkbox"  onchange="fun()" name="userid[]" value="1"/>

2) Wrap your code to a function like

function fun() {
  //add your code
}

See it is working in this JSFiddle

Upvotes: 2

Related Questions