Disable html input element by applying custom css class

Question

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

Well, .prop('disabled',true) is how you should do it with the current version of jQuery - which meets your request for a way to avoid the .attr() method. — nnnnnn
– nnnnnn, Commented Aug 8, 2012 at 11:26
There is no CSS property to specify disabled. jQuery's .prop() is the better method. Though I'm assuming you want to avoid that as well as attr(). May I ask why? — David Thomas
– David Thomas, Commented Aug 8, 2012 at 11:29
You can't disable an element with just CSS, but you CAN accept an answer to each of the 8 previous questions you've posted here. — chrisfrancis27
– chrisfrancis27, Commented Aug 8, 2012 at 11:29
possible duplicate of How do I disable form fields using CSS? — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, Commented Jul 5, 2014 at 12:06

nnnnnn · Accepted Answer · 2012-08-08 11:39:13Z

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

Mohammad Usman · Accepted Answer · 2018-03-30 07:24:45Z

7

You can use following css to practically disable the input:

pointer-events: none;

edited Mar 30, 2018 at 7:24

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

answered Mar 30, 2018 at 7:20

Emircan

711 silver badge2 bronze badges

Comments

Yallaling Goudar · Accepted Answer · 2019-11-14 08:57:07Z

4

Using normal CSS

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

answered Nov 14, 2019 at 8:57

Yallaling Goudar

2432 silver badges3 bronze badges

Comments

Gareth Parker · Accepted Answer · 2012-08-08 11:32:34Z

2

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

answered Aug 8, 2012 at 11:32

Gareth Parker

5,0832 gold badges22 silver badges43 bronze badges

1 Comment

nnnnnn Over a year ago

The :input selector basically selects all form controls, not just <input type="text">.

Faust · Accepted Answer · 2012-08-08 11:45:12Z

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

answered Aug 8, 2012 at 11:45

Faust

15.5k10 gold badges58 silver badges116 bronze badges

2 Comments

nnnnnn Over a year ago

Note that you don't need the .each(), you can say this.prop().addClass().

Bob Stein Over a year ago

Don't you mean $(this).prop('disabled', true); And anyway, wouldn't you want disableInput() to have a true/false parameter?

Nick · Accepted Answer · 2012-08-08 11:36:57Z

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

answered Aug 8, 2012 at 11:36

Nick

1,8693 gold badges24 silver badges33 bronze badges

Collectives™ on Stack Overflow

Disable html input element by applying custom css class

6 Answers 6

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related