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 事件处理程序，为 checkboxes

示例：

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

2）将代码包装到类似

的函数中

function fun() {
  //add your code
}

看到它正在使用此JSFiddle

Answer 2

尝试使用而不是使用：

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

只是：

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

对于每个按钮，然后在复选框内的document.ready和onclick()事件中检查启用的复选框数量。然后从您的功能中应用您的设置。

也代替使用

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

只需对元素使用id，因为它们只出现一次：

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

编辑：代替onclick()按onChange()触发功能，感谢@Praveen

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

2 个答案: