Is there a way of not letting users change a select input?.

I have a form with an already selected option, and I want to aware users that they are doing that and I was trying to do this.

I have a select with id=users:

   $("#users").change(function(){
        confirm("You are going to change the default value. Are you sure?");
   });

One of the problems I have is that it only happens if I click on an option, it's not happening as soon as I click on the select input.

Another thing is that it shows 2 times, is there a way of handle this?

And the last question, how can I make that after click on "cancel" button of the confirm window, it won't display the list of options and if I click on "accept" it should display the options.

I guess what I'm trying to do is a intermediate event between not doing anything and after click event on that select.

Hope someone can help me.

Is there a way of not letting users change a select input?.

I have a form with an already selected option, and I want to aware users that they are doing that and I was trying to do this.

I have a select with id=users:

   $("#users").change(function(){
        confirm("You are going to change the default value. Are you sure?");
   });

One of the problems I have is that it only happens if I click on an option, it's not happening as soon as I click on the select input.

Another thing is that it shows 2 times, is there a way of handle this?

And the last question, how can I make that after click on "cancel" button of the confirm window, it won't display the list of options and if I click on "accept" it should display the options.

I guess what I'm trying to do is a intermediate event between not doing anything and after click event on that select.

Hope someone can help me.

• javascript
• jquery
• jquery-events

• Sounds like what you really want is a custom interface element that looks like a select when rendered, rather than an actual select... – Tetsujin no Oni Commented Jan 17, 2012 at 15:33
• Well, not exactly. Just want to make people aware that they are changing an already selected option in a select input – JavierQQ23 Commented Jan 17, 2012 at 15:34
• 1 the change event of a <select> is definitely not what you're looking for then... breaking down the UI storyboard, you want to intercept a click, display an interstitial prompt, and then conditionally open the select's dropdown based on the response to the prompt. I don't think that's a select any more... – Tetsujin no Oni Commented Jan 17, 2012 at 15:40
• Yes, I just tried to do that and It works but not as I want, what should I do then? – JavierQQ23 Commented Jan 17, 2012 at 15:43

2 Answers 2

It's basically what Tetsujin no Oni said, but there's no reason you can't do it with a select. Just intercept a mousedown instead of a click (so it is instantaneous) and prevent the default behavior if necessary:

http://jsfiddle/zKHaj/5/

Also, you may want to add a boolean variable like "hasAccepted" so that you they only have to do the confirmation once.

You can disable the select input (either in the tag with disabled="disabled" or at runtime by doing)

$("#users").attr("disabled","disabled");

but then you'll want to add in either a hidden element to submit your value, or remove the disabled attribute right before you submit (otherwise the value wont get submitted.)