在單選按鈕之一選中時啟用表單字段，在未選中時禁用字段
[英]To enable form fields when one of the radio button checked & disable fileds when it unchecked
問題描述
我有一個包含2個無線電按鈕的表單，默認情況下其中一個處於選中狀態。 我已經禁用了某些字段並希望在選中第二個單選按鈕時啟用它，並在選中第一個單選按鈕時禁用它們（也想重新獲得CSS屬性）。
現在，我只能對輸入字段執行此操作，而無需任何腳本。
任何幫助將不勝感激。
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] { background: #ddddbb; color: black; cursor: default; } input[type="text"]:disabled, input[type="select"]:disabled { background: #ddddbb; }
<html> <title>Form</title> <body bgcolor="#FFFFFF" topmargin="20" leftmargin="50"> <input type="radio" name="radSize" id="generic_test" value="false" checked="checked" onclick="document.getElementById('project_id').disabled=true;" /> <label for="generic_test">Generic Test</label> <input type="radio" name="radSize" id="project_test" value="true" onclick="document.getElementById('project_id').disabled=false;" /><label for="project_test">Project Test</label> <table align="left"> <tr> <tr> <td width="126" height="24" align="left" valign="middle"> <span class="f1">Project ID <span class="star">*</span></span> </td> <td width="126" height="24" align="left" valign="middle"> <input type="text" name="project_id" id="project_id" size="19" value="" disabled="disabled"> </td> </tr> <tr> <td height="24" width="50" align="left" valign="middle"> <span class="f1"> Multiphase <span class="star">*</span></span> </td> <td align="left" valign="middle" nowrap="nowrap"> <select name="multiphase" id="multiphase" onchange="onChangeFunction();" disabled="disabled"> <option value='' selected></option> <option value='Yes'>Yes</option> <option value='No'>No</option> </select> </td> </tr> <div> <tr> <td class="f1">Text Area<br><span class="star">*</span> </td> <td> <textarea id="textInputField3" name="textInputField3" style="resize:vertical; text-align:top; " rows="5" cols="52" disabled="disabled"></textarea> </td> </tr> </div> </tr> </table>
1 個解決方案
解決方案1
0 已采納 2016-03-14 14:44:43
要使css規則起作用，請將removeAttribute用於disabled的Attribute以啟用該字段，或使用setAttribute禁用它。 https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute
function enable(enabled){ var project = document.getElementById('project_id'), multiphase = document.getElementById('multiphase'); textInputField3 = document.getElementById('textInputField3'); if(enabled){ project.removeAttribute('disabled'); multiphase.removeAttribute('disabled'); textInputField3.removeAttribute('disabled'); } else { project.setAttribute('disabled','disabled'); multiphase.setAttribute('disabled','disabled'); textInputField3.setAttribute('disabled','disabled'); } }
input, textarea, select { background: #fff; color: black; cursor: default; } input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] { background: #ddddbb; } input[type="text"]:disabled, input[type="select"]:disabled { background: #ddddbb; }
<html> <title>Form</title> <body bgcolor="#FFFFFF" topmargin="20" leftmargin="50"> <input type="radio" name="radSize" id="generic_test" value="false" checked="checked" onclick="enable(false)" /> <label for="generic_test">Generic Test</label> <input type="radio" name="radSize" id="project_test" value="true" onclick="enable(true)" /><label for="project_test">Project Test</label> <table align="left"> <tr> <tr> <td width="126" height="24" align="left" valign="middle"> <span class="f1">Project ID <span class="star">*</span></span> </td> <td width="126" height="24" align="left" valign="middle"> <input type="text" name="project_id" id="project_id" size="19" value="" disabled="disabled"> </td> </tr> <tr> <td height="24" width="50" align="left" valign="middle"> <span class="f1"> Multiphase <span class="star">*</span></span> </td> <td align="left" valign="middle" nowrap="nowrap"> <select name="multiphase" id="multiphase" onchange="onChangeFunction();" disabled="disabled"> <option value='' selected></option> <option value='Yes'>Yes</option> <option value='No'>No</option> </select> </td> </tr> <div> <tr> <td class="f1">Text Area<br><span class="star">*</span> </td> <td> <textarea id="textInputField3" name="textInputField3" style="resize:vertical; text-align:top; " rows="5" cols="52" disabled="disabled"></textarea> </td> </tr> </div> </tr> </table>
選中/未選中時，Angular2啟用/禁用表中的無線電輸入
[英]Angular2 enable/disable radio inputs in table when checked/unchecked
HTML / JS：選中兩個單選按鈕之一時啟用禁用文本框
[英]HTML / JS: Enable disable textbox when one of two radio button checked
如果所有復選框都未選中則禁用按鈕，如果至少選中一個則啟用它
[英]Disable button if all checkboxes are unchecked and enable it if at least one is checked
如何在語義UI中選中和取消選中復選框時動態地啟用和禁用按鈕
[英]how to dynamically enable and disable button when checkbox is checked and unchecked in semantic UI
復選框：當有多個選中的復選框時，啟用/禁用未選中的復選框
[英]Check box: Enable/Disable unchecked boxes when there is a number of checked ones
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.