5

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

5 Answers  正确答案

8

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

You can use following css to practically disable the input:

pointer-events: none;
1

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

1

You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:

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

    }
})(jQuery);

Then you can call it like this:

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

...and even chain it with other stuff, like this:

$('#myInput').disableInput().addClass('otherClass');
  • Note that you don't need the .each(), you can say this.prop().addClass(). – nnnnnn Aug 8 '12 at 11:46
  • Don't you mean $(this).prop('disabled', true); And anyway, wouldn't you want disableInput() to have a true/false parameter? – Bob Stein Sep 19 '16 at 0:03
0

You can't disable input elements using css properties. But you can improve your current coding like following

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

来自  https://stackoverflow.com/questions/11863499/disable-html-input-element-by-applying-custom-css-class