Disable text box without style changing?

How can you disable an HTML text box without having the browser change the visual appearance of the textbox?

We disable with JQuery: $(".datepick")开发者_运维知识库.attr('readonly', 'readonly');

Works fine but in Firefox the text box appears with a grey background and a thick border. We want to prevent this from happening.

Reason we are doing this is to make a JQuery date picker text box read only (so the user has to use the calendar popup area).

You could do it by blurring the text input on focus:

$('.datepick').focus(function(){
    this.blur();
});

Alternatively, you could just disable text entry in the input:

$('.datepick').keydown(function(e){
    e.preventDefault();
});

If you want to override the styling for a disabled input box, explicitly set the styling for an input text box like so:

input[type=text] {
  color: #000;
  background-color: #fff;
}
/* alternatively you could add textarea to this as well */

additionally you could set a css class like 'disabled' whenever you set the input to disabled and use a disabled css style like so:

input[type=text].disabled {
  /* disabled styling goes here */
}

and then have some code like this:

$(some_input).attr('disabled', 'disabled');
$(some_input).addClass('disabled');

and to reenable the field you could try something like:

$(some_input).removeAttr('disabled');
$(some_input).removeClass('disabled');

The disabled attribute of the input element prevents focus and input without changed the appearance.

Try this:

$(".ui-state-disabled").removeClass("ui-state-disabled");

I was working with some draggable/droppable elements and wanted to disable that functionality without changing their appearance.

hows about attr('disabled', true). to re-enable, removeAttr('disabled')

http://jsfiddle.net/E9m3K/3/

^ styled disabled, since you asked to disable

http://jsfiddle.net/E9m3K/4/

^ styled readonly, so you probably just want to override / explicitly define border and background in the css.