javascript - 选中一个或多个复选框时启用/禁用按钮

Question

为此，我有一个 javascript 文件，用于计算表单中选中的复选框数量，然后:

• 如果未选中任何内容，这些按钮:更改、删除、重置密码将被禁用。
• 如果选中其中一项，则所有这些都将启用。
• 如果选中两个或多个，则“更改”将被禁用，其余部分仍将启用。

但实际上，无论我做什么，他们都会处于禁用状态，所以我想知道我在这里做错了什么。 这是我的代码:

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>trangnt00914@fpt.edu.vn</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>apgs1104@gmail.com</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>apgs1234@gmail.com</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>apgs1104@yahoo.com</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>trang1104@gmail.com</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>

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

感谢您的帮助!

Answer 1

您的代码很好，您唯一错过的是将其包装到函数并添加事件处理程序。

1) 对您的复选框使用onchange事件处理程序

示例:

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

2)将代码包装到类似的函数中

function fun() {
  //add your code
}

看看它在这个 JSFiddle 中工作