javascript to set attribute readonly on dropdown value change

Question

on selecting values from the drop down, if the selected values equals to a certain value, i want the dropdown to change to readonly, how can i do that?

HTML:

<select id="s_id">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option></select>

Script:

$(document).ready(function () {
   $("#s_id").change(function () {
     var x = $(this).val();
     //alert("something's changed");
     alert($(this).val());
     if (x === opel) {
         alert("iff only.....");
         $(this).attr("readOnly", "true");
    }
   });
});

Fiddle: http://jsfiddle.net/L4reds/xKQUd/2/

Firstly, you need to add quotes around the value condition: `if (x === "opel")...`. Secondly and more importantly, `select` elements cannot be made `readonly`. They can be `disabled`, but their value would then not be sent with the form data. — Rory McCrossan, Jul 26 '13 at 12:15
Your line `if (x == opel) {`, variable `opel` is _undefined_. You probably wanted to compare against _String_; `if (x == 'opel') {` — Paul S., Jul 26 '13 at 12:15

verbanicm · Accepted Answer · 2013-07-26T12:30:09.397

13

You need to compare x to a string of "opel" and you can use the attribute disabled, see fiddle here: http://jsfiddle.net/xKQUd/3/

To clarify: select elements cannot be set to readOnly, need to use the disabled attribute

To get around the not sending to the server issue, set a hidden input equal to the disabled value that will be sent on form submission instead, view this fiddle here: http://jsfiddle.net/xKQUd/25/

edited Jul 26 '13 at 12:30

answered Jul 26 '13 at 12:16

verbanicm

2,406
1
14
9

2

There is the bigger issue however that a `select` element cannot be made `readonly`. – Rory McCrossan Jul 26 '13 at 12:18
Hence why I said to use the disabled attribute – verbanicm Jul 26 '13 at 12:18
2

But that will mean that the value selected will never be sent to the server, which may be counter to what the OP requires. `disabled` is not a workable alternative. – Rory McCrossan Jul 26 '13 at 12:19
just what i wanted....excellent answer. you seem to know it. – L4reds Jul 26 '13 at 12:36

Ishan Jain · Answer 2 · 2013-07-26T12:30:24.430

In your code, you used opel as a variable. but it's not a variable it's a string. So you need to take as a string (in single or double quotes).

$(document).ready(function () {
    $("#s_id").change(function () {
        var x = $(this).val();            
        alert($(this).val());
        alert("x=======" +x);
        if (x == "opel") {
            alert("iff");
            $(this).attr("disabled", "disabled");
        }
    });
});

Try this jsfiddle

or take a variable var opel = "opel";.

Try jsfiddle

emerson.marini · Answer 3 · 2013-07-27T21:50:57.180

Select elements can't be set readonly, but can be disabled instead. But in this case, their value won't be submitted with the form.

You have two options here.

One is to set a hidden input with the selected value, and then disable the select:

$(document).ready(function () {
   $("#s_id").on("change", function () {
       if ($(this).val() === "opel") {
           $("#myHiddenField").val($(this).val());
           $(this).attr("disabled", "disabled");
       }
   });
});

The other one, is to remove all the other options from the select, leaving just the selected one available:

$(document).ready(function () {
   $("#s_id").on("change", function () {
     if ($(this).val() === "opel") {
         $(this).children("option").each(function() {
            if (this.value != "opel")
               this.remove();
         });
     }
   });
});

It's up to you now.

score 1 · Answer 4 · answered Jul 26 '13 at 12:18

Select doesn't have attr ReadOnly - instead it can be disabled so your code:

$(document).ready(function () {
    $("#s_id").change(function () {
        var x = $(this).val();
        //alert("something's changed");
        alert($(this).val());
        alert("x=======" +x);
        if (x == "opel") {
            alert("iff");
           // $(this).attr("readOnly", "true");
            $(this).attr('disabled',true);
        }
    });
});

btw open is not a variable, but value, so needs to be in quotes "opel" and fiddle: http://jsfiddle.net/xKQUd/5/

score 0 · Answer 5 · answered Jul 26 '13 at 12:19

0

Try

if (x == 'opel') {
        alert("iff");
        $(this).attr("disabled", "true");
    }

FIDDLE Demo

answered Jul 26 '13 at 12:19

Neeraj Dubey

4,401
8
30
49

score 0 · Answer 6 · answered Jul 26 '13 at 12:21

0

Try this,

if (x == "opel") {

            $(this).attr("disabled", "disabled");
        }

answered Jul 26 '13 at 12:21

Jeet Bhatt

744
1
7
22

score 0 · Answer 7 · answered Jul 26 '13 at 12:30

Try Below Code:

<select id="s_id">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
 </select>

Jquery Code:

$(document).ready(function () {
$("#s_id").change(function () {
 var x = $(this).val();    
 if (x == 'opel') {
     $(this).attr('disabled','disabled');
}
});
});

http://jsfiddle.net/Ea6NN/

score 0 · Answer 8 · answered Jul 26 '13 at 12:30

Here you are http://jsfiddle.net/SteveRobertson/xKQUd/24/

      $(document).ready(function () {
          y=1;
          $("#s_id").change(function () {
             var x = $(this).val();
    //alert("something's changed");


             if (x == "opel" && x!=y) {           
                y=x;
                $("#s_id").prop("disabled", true).change();            
    }
});

});

javascript to set attribute readonly on dropdown value change

8 Answers8