2つのラジオボタンを含むフォームがあり、そのうちの1つはデフォルトでチェックされています。いくつかのフィールドを無効にして、2番目のラジオボタンがチェックされているときに有効にし、1番目のラジオボタンがチェックされているときにそれらを無効にします（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>cssルールを機能させるにはremoveAttribute、属性にdisabledを使用してフィールドを有効にするか、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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加