在另一个选择标签中选择一个值时启用禁用的选择答案

【问题标题】：enable a disabled select when choose a value in another select tag在另一个选择标签中选择一个值时启用禁用的选择
【发布时间】：2015-09-01 06:02:17
【问题描述】：

我有这两个选择标签：

<select>
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

如您所见，我的第二个选择具有禁用属性。我想在 javascript 中，当我在第一次选择中选择选项 "car" 时，第二次选择带有汽车选择的选项就可以做出选择。

如何在 javascript 中继续操作？

【问题讨论】：

那么，你为什么要用jquery标记这个问题呢？

标签： javascript html disabled-input

【解决方案1】：

将ids 放在您的selects 上以轻松定位他们
在处理程序中，默认情况下，disable 第二个select 元素
如果第一次选择的当前val是car，那么设置disabled为false

$('#AutoType').change(function() {
  $('#Model').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#Model').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="AutoType">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="Model" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

【讨论】：

【解决方案2】：

JavaScript 版本：

document.getElementById("one").onchange = function () {
  document.getElementById("two").setAttribute("disabled", "disabled");
  if (this.value == 'car')
    document.getElementById("two").removeAttribute("disabled");
};

<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled id="two">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jQuery 版本：

$('#one').change(function() {
  $('#two').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#two').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="two" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

【讨论】：

【解决方案3】：

您需要为您选择的元素分配一个id，例如：

<select id="my-input-id" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

 document.getElementById('my-input-id').disabled = false;

【讨论】：

【解决方案4】：

试试这个：

<form id="creation" name="creation" onchange="handleSelect()">
    <select name="select01" id="select01">>
      <option value="car">car</option>
      <option value="truck">truck</option>
      <option value="moto">moto</option>
      <option value="none">none</option>
    </select>

    <select name="select02" id="select02" disabled>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    </form>

    function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

【讨论】：

【解决方案5】：

您想简单地使用前端框架，例如 Angular 或 React.js 或 Ember？如果你想做一些复杂的事情，那就容易多了。

一个演示如下： http://jsfiddle.net/PxdSP/2244/

您需要做的就是在您的网站中包含 angular.js

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

然后您可以将逻辑分配给控制器并决定您要对 select 或 div 做什么。

【讨论】：