Disable html input element by applying custom css class
css, html, javascript, jquery
Solution
There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
<style>
#retention_interval_div input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}
</style>
Then in your code you just have to say:
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
(Of course, the `:disabled` CSS selector isn't supported in old browsers.)
Note that if you're using jQuery version >= 1.6 you should use `.prop()` instead of `.attr()` to change the disabled state.
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
Problem
I want to disable my all input element of a div by applying my custom css class. but i could not find any css attribute which can disable an input element. currently what am i doing ``` $('#div_sercvice_detail :input').attr('disabled', true); $('#retention_interval_div :input').addClass("disabled"); ``` which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes ``` $('#retention_interval_div :input').addClass("disabled"); ``` class ``` .disabled{ color : darkGray; font-style: italic; /*property for disable input element like*/ /*disabled:true; */ } ``` any suggestion for doing this with jquery without using .attr('disabled', true);?