在下拉更改选择上启用禁用多个输入

问题描述 投票：0回答：1

我正在尝试在选择框更改时启用或禁用多个文本框。 这意味着当我在选择框中选择任何选项时，所有字段都应启用。

尝试了下面的 JavaScript 和 Html，但它仅适用于在下拉列表中选择选项值 8 时。 不过我希望它可以与选定的任何选项一起使用。 它应该启用前 14 个文本框字段，并在下拉列表中选择任何选项，第二个下拉列表应该启用/禁用最后 14 个文本框。

<script type="text/javascript">
    function EnableDisableTextBox(ALE2) {
        var selectedValue = ALE1.options[ALE1.selectedIndex].value;
        var ALE2 = document.getElementById("ALE2");
        ALE2.disabled = selectedValue == 8 ? false : true;
        if (!ALE2.disabled) {
            ALE2.focus();
        }
    }
</script>


<table class="table table-bordered no-margin">
    <tbody>
        <tr>
            <td>
                <b>
                    S
                </b>
            </td>
            <td>
                <div class="col-md-10 col-sm-4 col-xs-4">
                    <select id="ALE1" name="ALE1" class="form-control" onchange="EnableDisableTextBox(this)"
                            required="True">
                        <option value="">
                            ----
                        </option>
                        <cfloop query="qryGetALESelect">
                            <option value="#ale1#">
                                #ALE1#
                            </option>
                        </cfloop>
                    </select>
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE2" name="ALE2"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-md-10 col-sm-4 col-xs-4">
                    <select id="ALE3" name="ALE3" class="form-control" required="True">
                        <option value="">
                            ----
                        </option>
                        <cfloop query="qryGetALESelect">
                            <option value="ALE1">
                                #ALE1#
                            </option>
                        </cfloop>
                    </select>
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE4" name="ALE4"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    T
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE5" name="ALE5"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE6" name="ALE6"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    A
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE8" name="ALE8"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE9" name="ALE9"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input 
                    type="text" class="form-control" id="ALE10" name="ALE10" value="" pattern="^[ 
                    A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder="" data-error="" disabled="disabled"
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE11" name="ALE11"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    R
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE12" name="ALE12"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE13" name="ALE13"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    B
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE14" name="ALE14"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE15" name="ALE15"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE16" name="ALE16"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE17" name="ALE17"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    O
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE18" name="ALE18"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE19" name="ALE19"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    A
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE20" name="ALE20"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE21" name="ALE21"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE22" name="ALE22"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE23" name="ALE23"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    R
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE24" name="ALE24"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE25" name="ALE25"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <b>
                    D
                </b>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE26" name="ALE26"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE27" name="ALE27"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE28" name="ALE28"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE29" name="ALE29"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE30" name="ALE30"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
            <td>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ALE31" name="ALE31"
                           value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2" placeholder=""
                           data-error="" disabled="disabled">
                </div>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>
javascript jquery textbox dropdown disable
1个回答
0
投票

不要使用像

onchange
这样的内联JS。 JS 应该只在一个地方，那就是相应的标签或文件。查询您的选择器并使用 
.addEventListener()
代替。
要获取名称以 
ALE
开头的所有文本输入，请使用选择器：
[type="text"][name^="ALE"]

使用 
.querySelectorAll()
和 
.forEach()
NodeList 查询这些输入，并根据需要设置 
disabled
Element 属性。

示例：

// DOM utils

const el = (sel, par = document) => par.querySelector(sel);
const els = (sel, par = document) => par.querySelectorAll(sel);


// Task

const elALE1 = el("#ALE1");
const elALE2 = el("#ALE2");
const elsInputs = els(`[type="text"][name^="ALE"]`);

const enableDisableTextBox = () => {
  const ale1 = elALE1.value;
  const is8 = ale1 === "8";
  elALE2.disabled = is8;
  if (!is8) ALE2.focus();
  elsInputs.forEach((elInput) => {
    elInput.disabled = !is8;
  });
};

elALE1.addEventListener("input", () => {
  enableDisableTextBox();
});
    <table class="table table-bordered no-margin">
      <tbody>
        <tr>
          <td>
            <b>S</b>
          </td>
          <td>
            <div class="col-md-10 col-sm-4 col-xs-4">
              <select id="ALE1" name="ALE1" class="form-control" required="True">
                <option value="">----</option>
                <option value="8">8</option>
              </select>
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE2" name="ALE2" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-md-10 col-sm-4 col-xs-4">
              <select id="ALE3" name="ALE3" class="form-control" required="True">
                <option value="">
                  ----
                </option>
                <CFLOOP QUERY="qryGetALESelect">
                  <option value="ALE1">
                    #ALE1#
                  </option>
                </CFLOOP>
              </select>
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE4" name="ALE4" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <b>T</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE5" name="ALE5" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE6" name="ALE6" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
        </tr>
        <tr>
          <td>
            <b>A</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE8" name="ALE8" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE9" name="ALE9" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE10" name="ALE10" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled"
                     </div>
              </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE11" name="ALE11" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <b>R</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE12" name="ALE12" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE13" name="ALE13" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
        </tr>
        <tr>
          <td>
            <b>B</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE14" name="ALE14" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE15" name="ALE15" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE16" name="ALE16" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE17" name="ALE17" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <b>O</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE18" name="ALE18" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE19" name="ALE19" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
        </tr>
        <tr>
          <td>
            <b>A</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE20" name="ALE20" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE21" name="ALE21" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE22" name="ALE22" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$"  maxlength="2" placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE23" name="ALE23" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <b>R</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE24" name="ALE24" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE25" name="ALE25" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
        </tr>
        <tr>
          <td>
            <b>D</b>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE26" name="ALE26" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE27" name="ALE27" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE28" name="ALE28" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE29" name="ALE29" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
        </tr>
        <tr>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE30" name="ALE30" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>

          </td>
          <td>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="ALE31" name="ALE31" value="" pattern="^[ A-Za-z0-9\[\]()*\-+/%]*$" maxlength="2"  placeholder="" data-error="" disabled="disabled">
            </div>
          </td>
          <td>
          </td>
        </tr>
      </tbody>
    </table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.