Make dropdown read-only

Question

I am trying to write a code which will make HTML dropdowns readonly but not "disabled" because I want to capture the default values in current form that are coming from previous form.

I have written the below code which is working perfectly fine in Chrome but not working in IE. What could be the possible solution to this.

Below is the jquery code that I have written.

$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
                $(this).on("mousedown", function(e){
                                return false;
                }).on("change", function(){
                                $(this).find('option').each(function(i, opt) {
                                    opt.selected = opt.defaultSelected;
                                });
                }).css("background-color","grey");
});

Dropdowns are readonly only , as you cant write in any Dropdown like textbox. — Pratik Joshi, Mar 23 '15 at 06:31
http://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input see this answer — Girish, Mar 23 '15 at 06:32
Here is the link to the fiddle but when I try to run this code in jsFiddle, it works fine on IE as well but it does not work when I try to make this work in actual HTML file. http://jsfiddle.net/vikastovicky/2ydcnzn6/ — braceyourself, Mar 23 '15 at 06:38

Vinod Bangar · Accepted Answer · 2015-03-23T08:01:30.500

1

Try this one, just disable options which are not selcted

$("#Q4Q25xP1_1,#Q4Q25xP1_2,#Q4Q25xP1_3").find("option").each(function () {
    if ($(this).attr("selected") != "selected") {
        $(this).attr("disabled", 'disabled');
    }
});

and here is the jsfiddle for reference https://jsfiddle.net/3v0w9n3r/

And it works in all browsers including IE.

edited Mar 23 '15 at 08:01

answered Mar 23 '15 at 07:06

Vinod Bangar

86
6

That's Great, Your always Welcome @braceyourself Cheers :) – Vinod Bangar Mar 23 '15 at 12:26

score 0 · Answer 2 · answered Mar 23 '15 at 06:35

0

You can try setting the pointer-events to none using CSS:

<select style="pointer-events:none;">
....

answered Mar 23 '15 at 06:35

ArinCool

1,720
1
13
24

score 0 · Answer 3 · answered Mar 23 '15 at 06:35

0

$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
      $(this).attr('disabled','disabled');
}

answered Mar 23 '15 at 06:35

Asit

458
4
14

I do not want to make the dropdown disabled as I want to store the data which was loaded by default. – braceyourself Mar 23 '15 at 06:40
So you want to see the data, but do not let that change. Am I right ? – Asit Mar 23 '15 at 06:42

score 0 · Answer 4 · answered Mar 23 '15 at 06:42

0

"Change" event is not consistent in browser,In Firefox and Chrome it work properly but in IE need to clicked TWICE, first to remove "indeterminate" state, then again to fire the change event. so you need to use trigger click event to click second time so event initialize and work.

So you need to use trigger mousedown for second time apply mousedown event on same element than change event work properly

answered Mar 23 '15 at 06:42

Pintu Patel

1
3

As for the events, they are working perfectly fine, only that I am not able to cancel this event and also not able to set the default value. – braceyourself Mar 23 '15 at 06:49

Make dropdown read-only

4 Answers4