How to enable/disable drop down list box in HTML + Javascript/JQuery?

Question

I have 2 drop down lists of pairs of name IMEI's and cities, as following:

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

The desired behavior is: when one selects a city name, the IMEI list enables; otherwise it is disabled.

How can I achieve this?

Thanks in advance!

possible duplicate of stackoverflow.com/questions/7703241/… — amudhan3093
– amudhan3093, Commented Mar 4, 2014 at 9:16
Just to point out the obvious - your city dropdown will already have "Jhansi" selected. As a user I would be mighty annoyed to have to select a different city in order to enable the IMEI dropdown, if I wanted to select Jhansi. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 4, 2014 at 9:20

Tushar Gupta - curioustushar · Accepted Answer · 2014-03-04 09:15:01Z

2

Fiddle Demo

$(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
    });
});

.change()

answered Mar 4, 2014 at 9:15

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaimin · Accepted Answer · 2014-03-04 09:20:20Z

2

Try this,

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

Script

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

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

Demo:http://jsfiddle.net/khmSm/

answered Mar 4, 2014 at 9:20

Jaimin

8,0002 gold badges27 silver badges32 bronze badges

Comments

alexP · Accepted Answer · 2014-03-04 09:25:58Z

0

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

edited Mar 4, 2014 at 9:25

answered Mar 4, 2014 at 9:16

alexP

3,7657 gold badges29 silver badges37 bronze badges

Comments

dreamweiver · Accepted Answer · 2014-03-04 09:27:14Z

0

try this way

HTML CODE:

   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>

JQUERY CODE:

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

LIVE DEMO:

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

Happy Coding :)

edited Mar 4, 2014 at 9:27

answered Mar 4, 2014 at 9:18

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Comments

monu · Accepted Answer · 2014-03-04 09:29:34Z

0

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

Here is the link : http://jsfiddle.net/khmSm/1/

answered Mar 4, 2014 at 9:29

monu

3701 silver badge10 bronze badges

Comments

Ramya Prakash Rout · Accepted Answer · 2020-05-18 19:20:42Z

0

Disable select and update the plugin. Use trigger chosen:updated to disable the select widget.

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

answered May 18, 2020 at 19:20

Ramya Prakash Rout

1412 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to enable/disable drop down list box in HTML + Javascript/JQuery?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related