CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
braceyourself
braceyourself

Reputation: 257

Make dropdown read-only

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

Upvotes: 1

Views: 295

Answers (4)

Vinod Bangar
Vinod Bangar

Reputation: 86

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.

Upvotes: 1

Pintu Patel
Pintu Patel

Reputation: 1

"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

Upvotes: 0

Asit
Asit

Reputation: 468

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

Upvotes: 0

ArinCool
ArinCool

Reputation: 1738

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

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

Upvotes: 0

Related Questions