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/

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
– Rory McCrossan, Commented Jul 26, 2013 at 12:15
Your line if (x == opel) {, variable opel is undefined. You probably wanted to compare against String; if (x == 'opel') { — Paul S.
– Paul S., Commented Jul 26, 2013 at 12:15

verbanicm · Accepted Answer · 2013-07-26 12:30:09Z

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, 2013 at 12:30

answered Jul 26, 2013 at 12:16

verbanicm

2,5461 gold badge16 silver badges9 bronze badges

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

4 Comments

Rory McCrossan Over a year ago

There is the bigger issue however that a select element cannot be made readonly.

verbanicm Over a year ago

Hence why I said to use the disabled attribute

Rory McCrossan Over a year ago

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.

L4reds Over a year ago

just what i wanted....excellent answer. you seem to know it.

Ishan Jain · Accepted Answer · 2013-07-26 12:30:24Z

2

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

edited Jul 26, 2013 at 12:30

answered Jul 26, 2013 at 12:22

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

Comments

emerson.marini · Accepted Answer · 2013-07-27 21:50:57Z

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.

Elen · Accepted Answer · 2013-07-26 12:18:29Z

1

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/

answered Jul 26, 2013 at 12:18

Elen

2,3433 gold badges24 silver badges47 bronze badges

Comments

Nitin Chaurasia · Accepted Answer · 2013-07-26 12:30:02Z

1

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/

answered Jul 26, 2013 at 12:30

Nitin Chaurasia

2631 silver badge5 bronze badges

Comments

Neeraj · Accepted Answer · 2013-07-26 12:19:12Z

0

Try

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

FIDDLE Demo

answered Jul 26, 2013 at 12:19

Neeraj

4,4898 gold badges32 silver badges51 bronze badges

Comments

Jeet Bhatt · Accepted Answer · 2013-07-26 12:21:18Z

0

Try this,

if (x == "opel") {

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

answered Jul 26, 2013 at 12:21

Jeet Bhatt

7682 gold badges8 silver badges22 bronze badges

Comments

Four_lo · Accepted Answer · 2013-07-26 12:30:08Z

0

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

});

answered Jul 26, 2013 at 12:30

Four_lo

1,15010 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related