Disable html input element by applying custom css class

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

No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password

You can use following css to practically disable the input:

pointer-events: none;