選中一個或多個復選框時啟用/禁用按鈕

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）為您的checkboxes使用onchange事件處理程序

例：

<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表示敬意