CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashish Panery
Ashish Panery

Reputation: 1226

Disable html input element by applying custom css class

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

Upvotes: 7

Views: 78225

Answers (6)

Yallaling Goudar
Yallaling Goudar

Reputation: 243

Using normal CSS

.disabled{
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

Upvotes: 4

Emircan
Emircan

Reputation: 71

You can use following css to practically disable the input:

pointer-events: none;

Upvotes: 7

Faust
Faust

Reputation: 15404

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

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

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

Upvotes: 10

Nick
Nick

Reputation: 1869

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

Upvotes: 0

Gareth Parker
Gareth Parker

Reputation: 5062

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

Upvotes: 2

Related Questions