Disable html input element using native css class

I want to disable the entire div input element by applying my own css class. but I could not find any css attribute that could disable the input element. what am i doing now

  $('#div_sercvice_detail :input').attr('disabled', true);
 $('#retention_interval_div :input').addClass("disabled"); 

which can disable the entire div input element with css attr, but I want to use my own class to disable all input with some additional css attributes

 $('#retention_interval_div :input').addClass("disabled");

the class

.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}    

any suggestion for this with jquery without using .attr ('disabled', true) ;?

+5
source share
5 answers

It is not possible to disable an element using CSS only, but you can create a style that will apply to disabled elements:

<style>
#retention_interval_div​​ input[type="text"]:disabled { 
    color : darkGray;
    font-style: italic;
}​
</style>

Then in your code you just need to say:

 $('#retention_interval_div :input').prop("disabled", true);

: http://jsfiddle.net/nnnnnn/DhgMq/

(, :disabled CSS .)

, jQuery >= 1.6, .prop() .attr(), .

, , , , - . , :

$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
+7

. CSS . CSS , . , , , textarea,

+1

2 , ? , :

(function ($) {
    $.fn.disableInput = function () {
        return this.each(function(){
            $(this).prop('disabled');
            $(this).addClass('disabled', true);            
        });

    }
})(jQuery);

:

$('#myInput').disableInput();

... , :

$('#myInput').disableInput().addClass('otherClass');​
+1

You can use the following css to practically disable input:

pointer-events: none;
+1
source

You cannot disable input elements using css properties. But you can improve your current coding as shown below.

 $('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
0
source

All Articles