如何在单击组合框中的选择项时启用已禁用的HTML表单元素

How to enable a disabled HTML form element when a choice from a combobox has been clicked?

本文关键字：启用 元素 表单 HTML 选择 单击 组合      更新时间：2023-09-26

我在我的HTML表单中有这个组合框，当点击其中一个选项时，将启用另一个被禁用的组合框。

下面是包含一个选项的组合框的代码，该选项将禁用另一个组合框

    Type of expense: <select name="expType" onchange="document.getElementById('expTypeVal').value=this.options[this.selectedIndex].text">
            <option value="direct labor"> direct labor </option>
            <option value="salary(sales)"> salary(sales) </option>
            <option value="salary (kitchen)"> salary(kitchen) </option>
            <option value="direct materials"> direct materials </option>
            <option value="indirect materials"> indirect materials </option>
            <option value="fare"> fare </option>
            <option value="kitchen supplies"> kitchen supplies </option>
            <option value="accounts payable"> accounts payable </option>
            <option value="rent"> rent </option>
            <option value="general"> general </option>
            <option value="repair/maint.(furn./fixt.)"> repair/maint.(furn./fixt.) </option>
            <option value="repair/maint.(equi./uten.)"> repair/maint.(equi./uten.) </option>
            <option value="repair/maint.(improv)"> repair/maint.(improv.) </option>
            <option value="drawings"> drawings </option>
    </select>

每当应付账款选项被选中时，我希望启用一个组合框。

下面是另一个组合框的代码。注意:这个是禁用的。

<select disabled name="acctPayables" onchange="document.getElementById('acctPayVal').value=this.options[this.selectedIndex].text">
      <option value="N/A"> --- </option>
      <option value="random1"> random1 </option>
      <option value="random2"> random2 </option>
</select>

检查一下我是否修改了一下

    <select disabled name="acctPayables" id="acctPayables">
          <option value="N/A"> --- </option>
          <option value="random1"> random1 </option>
          <option value="random2"> random2 </option>
    </select>   
    <select name="expType" id="expType" >
            <option value="direct labor"> direct labor </option>
            <option value="salary(sales)"> salary(sales) </option>
            <option value="salary (kitchen)"> salary(kitchen) </option>
            <option value="direct materials"> direct materials </option>
            <option value="indirect materials"> indirect materials </option>
            <option value="fare"> fare </option>
            <option value="kitchen supplies"> kitchen supplies </option>
            <option value="accounts payable"> accounts payable </option>
            <option value="rent"> rent </option>
            <option value="general"> general </option>
            <option value="repair/maint.(furn./fixt.)"> repair/maint.(furn./fixt.) </option>
            <option value="repair/maint.(equi./uten.)"> repair/maint.(equi./uten.) </option>
            <option value="repair/maint.(improv)"> repair/maint.(improv.) </option>
            <option value="drawings"> drawings </option>
    </select>
    <script>
        var select = document.getElementById("expType");
        var select1 = document.getElementById("acctPayables");
            select.onchange = function()
            {
                if(this.value == 'accounts payable')
                {
                    select1.removeAttribute('disabled');
                }
                else
                {
                    var att = document.createAttribute("disabled");
                    att.value = "";
                    select1.setAttributeNode(att);
                }
            }
    </script>

请检查以下相同的jsfiddle代码

http://jsfiddle.net/otkcbbh2/

试试这个

$('select[name=expType]').change(function(){
  if($('select[name=expType] option:selected').val() === '-1') {
    $('select[name=acctPayables]').attr('disabled', true);
  } else {
    if($('select[name=acctPayables]').attr('disabled')) {
      $('select[name=acctPayables]').removeAttr('disabled');
    } else {
      $('select[name=acctPayables]').attr('disabled', true);
    }    
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type of expense: <select name="expType" onchange="document.getElementById('expTypeVal').value=this.options[this.selectedIndex].text">
                <option value="-1"> --- </option>
                <option value="direct labor"> direct labor </option>
                <option value="salary(sales)"> salary(sales) </option>
                <option value="salary (kitchen)"> salary(kitchen) </option>
                <option value="direct materials"> direct materials </option>
                <option value="indirect materials"> indirect materials </option>
                <option value="fare"> fare </option>
                <option value="kitchen supplies"> kitchen supplies </option>
                <option value="accounts payable"> accounts payable </option>
                <option value="rent"> rent </option>
                <option value="general"> general </option>
                <option value="repair/maint.(furn./fixt.)"> repair/maint.(furn./fixt.) </option>
                <option value="repair/maint.(equi./uten.)"> repair/maint.(equi./uten.) </option>
                <option value="repair/maint.(improv)"> repair/maint.(improv.) </option>
                <option value="drawings"> drawings </option>
        </select>
<select disabled name="acctPayables" onchange="document.getElementById('acctPayVal').value=this.options[this.selectedIndex].text">
      <option value="-1"> --- </option>
      <option value="random1"> random1 </option>
      <option value="random2"> random2 </option>
</select>

添加如下的jQuery代码

<script>
$(document).ready(function(){
   $('select[name=expType]').change(function(){
     $('select[name=acctPayables]').attr('disabled', false);
   });
});
</script>
相关文章：