javascript to set attribute readonly on dropdown value change [duplicate]

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/

Answer 1

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/