如何在 HTML + Javascript/JQuery 中启用/禁用下拉列表框？

Question

我有 2 对名称 IMEI 和城市的下拉列表，如下所示：

<HTML>

 <body>
Select Programming font:
<select name="IMEI">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>

<select name ="city">
  <option value="jhansi">Jhansi</option>
  <option value="Delhi">Delhi</option>
  <option value="Mumbai">Mumbai</option>
  <option value="Kanpur">Kanpur</option>
</select>
</body>
</html>

所需的行为是：当一个选择城市名称时，IMEI列表启用; 否则它被禁用。

我怎样才能做到这一点？

提前致谢！

Answer 1

小提琴演示

$(function () {
    var sel_imie = $('select[name="IMEI"]');
    sel_imei.prop('disabled', true); //disable IMEI select
    $('select[name ="city"]').change(function () {
        sel_imei.prop('disabled', false); //enable when value of city select is changed
    });
});

。改变（）

Answer 2

尝试这个，

<select name="IMEI" disabled="disabled" id="IMEI">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>

<select name ="city" id="city">
  <option value="jhansi">Jhansi</option>
  <option value="Delhi">Delhi</option>
  <option value="Mumbai">Mumbai</option>
  <option value="Kanpur">Kanpur</option>
</select>

脚本

$('#city').on('change',function(){

$('#IMEI').attr('disabled',false);
});

演示： http : //jsfiddle.net/khmSm/

Answer 3

Select Programming font:
<select name="IMEI" disabled="disabled">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>
<select name="city">
    <option value="">Select...</option>
    <option value="jhansi">Jhansi</option>
    <option value="Delhi">Delhi</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Kanpur">Kanpur</option>
</select>

document.getElementsByName('city')[0].addEventListener('change', function(e){
    var imei = document.getElementsByName('IMEI')[0];
    var city = e.target;
    imei.disabled = city.value != '' ? '' : 'disabled';
});

Answer 4

试试这个方法

HTML代码：

   CITY :<select name="city">
           <option value="jhansi">Jhansi</option>
           <option value="Delhi">Delhi</option>
           <option value="Mumbai">Mumbai</option>
           <option value="Kanpur">Kanpur</option>
         </select>
         <br/>

   IMEI :<select name="IMEI">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">$</option>
         </select>

查询代码：

   $('select[name=IMEI]').prop('disabled',true);
   $('select[name=city]').on('change',function () {
        $('select[name=IMEI]').prop('disabled',false);
   });

现场演示：

http://jsfiddle.net/dreamweiver/TvpRF/7/

快乐编码:)

Answer 5

<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>

<select name ="city" id="city">
 <option value ="choose">Choose a city</option>
 <option value="jhansi">Jhansi</option>
 <option value="Delhi">Delhi</option>
 <option value="Mumbai">Mumbai</option>
 <option value="Kanpur">Kanpur</option>
</select>

这是链接： http : //jsfiddle.net/khmSm/1/

Answer 6

禁用选择和更新插件。 使用 trigger selected:updated 禁用选择小部件。

$('#RefundType').prop('disabled', true).trigger("chosen:updated");

如何在 HTML + Javascript/JQuery 中启用/禁用下拉列表框？

问题描述

6 个解决方案

解决方案1
2 已采纳 2014-03-04 09:15:01

解决方案2
2 2014-03-04 09:20:20

解决方案3
0 2014-03-04 09:16:57

解决方案4
0 2014-03-04 09:18:02

解决方案5
0 2014-03-04 09:29:34

解决方案6
0 2020-05-18 19:20:42

如何在 HTML + Javascript/JQuery 中启用/禁用下拉列表框？

问题描述

6 个解决方案

解决方案1 2 已采纳 2014-03-04 09:15:01

解决方案2 2 2014-03-04 09:20:20

解决方案3 0 2014-03-04 09:16:57

解决方案4 0 2014-03-04 09:18:02

解决方案5 0 2014-03-04 09:29:34

解决方案6 0 2020-05-18 19:20:42

解决方案1
2 已采纳 2014-03-04 09:15:01

解决方案2
2 2014-03-04 09:20:20

解决方案3
0 2014-03-04 09:16:57

解决方案4
0 2014-03-04 09:18:02

解决方案5
0 2014-03-04 09:29:34

解决方案6
0 2020-05-18 19:20:42