disabling checkbox using jQuery

Question

I am disabling the ID checkbox using following jquery

jQuery

$('.ColVis_collection button').first().find('input').attr("disabled", true);

html

This code is inside another button, which when clicked gets activated like a dropdown.

<div class="ColVis_collection TableTools_collection" style="display: block; position: absolute; opacity: 1; top: 102px; left: 274px; width: 449px;">
    <button class="ColVis_Button TableTools_Button" style="width: 449px;">
        <span>
            <span class="ColVis_radio">
                <input type="checkbox" checked="checked">
            </span>
            <span class="ColVis_title">
                <span>
                    id
                </span>
            </span>
        </span>
    </button>
    <button class="ColVis_Button TableTools_Button" style="width: 449px;">
        <span>
            <span class="ColVis_radio">
                <input type="checkbox" checked="checked">
            </span>
            <span class="ColVis_title">
                <span>
                    name
                </span>
            </span>
        </span>
    </button>
    .
    .
    .
</div>

The first button with span id gets disabled using the jquery and blurred showing that it is disabled but it can be clicked i.e. checked/unchecked. Am I missing something?

Edit:

I am using jQuery datatables colvis feature, which lets you hide/unhide the table columns

As you can see in this image, the checkbox seems disabled but can be checked/uncheked

What version of jQuery are you using? in more recent versions of jQuery .attr("disabled","disabled") should be .prop("disabled",bool) — user400654
– user400654, Commented Oct 3, 2013 at 15:19
I'm unclear as to what the problem is. In this fiddle (jsfiddle.net/j08691/PBhPJ) the ID checkbox is disabled. — j08691
– j08691, Commented Oct 3, 2013 at 15:21
@j08691, ya but neither other checkbox can be clicked, but when used with Datatables colvis feature, the checkbox can be checked/unchecked, and Yes by the jQuery I've posted, its seems like its been disabled but can be clicked.. I am using jQuery 1.8 — beebek
– beebek, Commented Oct 3, 2013 at 15:37

Arun P Johny · Accepted Answer · 2013-10-03 15:24:52Z

11

Use .prop() instead of .attr() to set the disabled property

$('.ColVis_collection button').first().find('input[type="checkbox"]').prop("disabled", true);

Demo: Fiddle

Attributes vs. Properties

edited Oct 3, 2013 at 15:24

answered Oct 3, 2013 at 15:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sai Avinash · Accepted Answer · 2013-10-03 15:21:22Z

4

try some thing like this:

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

answered Oct 3, 2013 at 15:21

Sai Avinash

4,75117 gold badges63 silver badges100 bronze badges

Comments

Pat Dobson · Accepted Answer · 2013-10-03 15:19:36Z

0

Try adding a read only attribute as well:

$('.ColVis_collection button').first().find('input').attr("disabled", true).attr("readonly", true);

That might sort you out . . .

answered Oct 3, 2013 at 15:19

Pat Dobson

3,2992 gold badges23 silver badges36 bronze badges

Comments

beebek · Accepted Answer · 2013-10-03 16:00:42Z

0

Didn't figured out what happened. May be I'll look later. Ended up hiding the first button i.e.

$('.ColVis_collection button').first().attr("hidden", true);

answered Oct 3, 2013 at 16:00

beebek

1,9475 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

disabling checkbox using jQuery

jQuery

html

Edit:

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

jQuery

html

Edit:

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related