Question

我有一个包含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>&nbsp;&nbsp;&nbsp;</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>

Answer 1

要让css规则正常工作，请使用removeAttribute为属性disabled启用字段或使用setAttribute禁用它。 https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute

＆＃13;

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');
  }
}

＆＃13;

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

＆＃13;

<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>&nbsp;&nbsp;&nbsp;</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>

＆＃13;

在选中其中一个单选按钮时启用表单字段＆amp;取消选中时禁用文件

1 个答案: