Why can't I enable and uncheck an element with jQuery?

Question

I want to enable and set check = false by editing this code?

if (confirm('This widget will be removed, ok?')) {
    $('table tr input[type=hidden]').filter(function() {
        return $(this).val() == widgetId;
    }).siblings('input[type=checkbox]').attr({disabled: true, checked: true});

I try :

.siblings('input[type=checkbox]').removeAttr('disabled');

and this.

.siblings('input[type=checkbox]').attr({disabled:false, checked: false});

but in vain

EDIT 1:

<table><colgroup><col title="process name"></colgroup> <tbody><tr><td><input name="rlv_mainservices$ctrl0$hf_id" id="rlv_mainservices_ctrl0_hf_id" value="91" type="hidden"> <input id="rlv_mainservices_ctrl0_chb_sys" name="rlv_mainservices$ctrl0$chb_sys" type="checkbox"> <span id="rlv_mainservices_ctrl0_lbl_main_sys">pro1</span> </td></tr></tbody></table><table><colgroup><col title="processname"> </colgroup><tbody><tr><td><input name="rlv_mainservices$ctrl1$hf_id" id="rlv_mainservices_ctrl1_hf_id" value="92" type="hidden"><input id="rlv_mainservices_ctrl1_chb_sys" name="rlv_mainservices$ctrl1$chb_sys" type="checkbox"> <span id="rlv_mainservices_ctrl1_lbl_main_sys">pro2</span> </td></tr></tbody></table>

I wanna to enable input type="checkbox" if the value of the input type ="hidden" that exist in the same <td> equal to the id of li(widget).This when the user click close.

I'm wondering, are you trying to set checkboxes according to a preference, and then setting them to `disabled: true` so the user can't toggle that checkbox? — Jared Farrish, Feb 26 '12 at 08:39
I'm not sure what that means, but see my attempt at an answer. — Jared Farrish, Feb 26 '12 at 09:01
`// Disable checkboxes which have a sibling hidden input field with value equal to widgetId` Your code does not do what you commented, it would be more: `// Disable checkboxes which are siblings of hidden input fields with value equal to widgetId` Can we see a bit of your HTML to understand what you want to do? — sinsedrix, Feb 26 '12 at 09:29

dku.rajkumar · Answer 1 · 2012-02-26T08:39:56.283

1

try this

$('table tr input[type="hidden"][value="'+widgetId+'"]')
       .siblings(':checkbox').attr("disabled": false).attr("checked": false);

edited Feb 26 '12 at 08:39

answered Feb 26 '12 at 08:33

dku.rajkumar

18,414
7
41
58

i need the opposite : enabled and not checked – Anyname Donotcare Feb 26 '12 at 08:36

score 1 · Answer 2 · answered Feb 26 '12 at 08:35

1

Try to use prop instead of attr: http://api.jquery.com/prop/

.siblings('input[type=checkbox]').prop({"disabled": false, "checked": false});

answered Feb 26 '12 at 08:35

Alex

6,276
2
20
26

Starx · Answer 3 · 2012-02-26T11:21:27.080

1

Actually you can do this with jQuery.

To enable

$('#element').removeAttr('disabled');

To uncheck

$('#element').removeAttr('checked');

Or, even Combine them

$('#element').removeAttr('disabled').removeAttr('checked');

Just in case, you manipulated the attribute after it has been loaded, then it will no longer be available as an attribute from jQuery 1.6.

If you are using so and later, try .removeProp( propertyName ) ^{[docs here]} instead.

$('#element').removeProp('disabled').removeProp('checked');

Update

Update 1: It does work. Check a demo here.
Update 2: I have also simulated the manipulation and created another fiddle using .removeProp(), check it here
Update 3: Ok, check this update. It it compatible with your markup, however, you might have to use proper selector, for you. However, this will give you the entire idea.

edited Feb 26 '12 at 11:21

answered Feb 26 '12 at 08:36

Starx

77,474
47
185
261

`$('table tr input[type=hidden]').filter(function() { return $(this).val() == widgetId; }).siblings('input[type=checkbox]').removeProp('disabled').removeProp('checked');` – Anyname Donotcare Feb 26 '12 at 08:55
Using `.prop({disabled: false, checked: false})` [works as well](http://jsfiddle.net/xBquz/2/). – Jared Farrish Feb 26 '12 at 09:02
because i try this : `if (confirm('This widget will be removed, ok?')) { // Disable checkboxes which have a sibling hidden input field with value equal to widgetId $('table tr input[type=hidden]').filter(function() { return $(this).val() == widgetId; }).siblings('input[type=checkbox]').removeProp('disabled').removeProp('checked');` and it doesn't work. – Anyname Donotcare Feb 26 '12 at 09:07
1

@just_name, Ok, check [here](http://jsfiddle.net/xBquz/4/), it is somewhat similar to what you need. If you need, actual code, update your question with the markup as well. – Starx Feb 26 '12 at 09:40
1

@just_name, Can you just pick out the related markup and update your post on your question? – Starx Feb 26 '12 at 10:35

Jared Farrish · Answer 4 · 2012-02-26T09:40:42.013

I'm wondering if this is somewhere along what you're trying to do. I had to come up with some stand-in markup, and I have no idea where widgetId comes from. However, is this the effect you're after?

EDIT - I'm not really sure what widgetId is doing here, and my original code was ignoring it, so I modified the code to run off the input:button click, which will manipulate it's siblings.

Sample HTML

<table>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
</table>

jQuery

$('.check').click(function(){
    var $td = $(this).parent('td');

    if (!confirm('This widget will be removed, ok?')) {
        $td.find(':checkbox').prop({disabled: true, checked: true});
    } else {
        $td.find(':checkbox').prop({disabled: false, checked: false});
    }
});

http://jsfiddle.net/SPVPx/1/

EDIT 2

A different example, using input:buttons not within the table.

HTML

<input type="button" class="check" value="Remove Widget 1" data-widget-id="widget1"/>
<input type="button" class="check" value="Remove Widget 2" data-widget-id="widget2"/>
<input type="button" class="check" value="Remove Widget 3" data-widget-id="widget3"/>
<table>
    <tr>
        <td>
            Widget 1:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget1"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
    <tr>
        <td>
            Widget 2:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget2"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
    <tr>
        <td>
            Widget 3:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget3"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
</table>

jQuery

// For testing only.
$(':checkbox').prop({disabled: true, checked: true});

$('.check').click(function(){
    var id = $(this).data('widget-id'),
        $td = $('table tr td input:hidden').filter(function(){
            return this.value == id;
        }).parent('td');

    if (confirm('This widget will be removed, ok?')) {
        $td.find(':checkbox').prop({disabled: false, checked: false});
    } else {
        $td.find(':checkbox').prop({disabled: true, checked: true});
    }
});

http://jsfiddle.net/SPVPx/2/

This is the real question but when i revise my recommendation i find my self need the opposite .i mean : `Enabled and checked = false` instead of the answer — Anyname Donotcare, Feb 26 '12 at 09:04
it works perfectly on `firefox`.but The IE can't Enable the checkbox — Anyname Donotcare, Feb 26 '12 at 09:40
yes , it works like this in the `firefox` . but in `IE` just make checked = false ,it 's still disabled . — Anyname Donotcare, Feb 26 '12 at 09:46
Nevermind, it appears it was a jsFiddle-related problem. See: http://jfcoder.com/test/disable.html — Jared Farrish, Feb 26 '12 at 10:03
See [this question](http://stackoverflow.com/questions/6169826/propchecked-false-or-removeattrchecked) for why to use `.removeAttr()` instead of `.removeProp()`. — Jared Farrish, Feb 26 '12 at 10:06
This is my last update but the same problem with IE only: `$(settings.widgetSelector, $(settings.columns)).each(function() { var widgetId = this.id; var thisWidgetSettings = iNettuts.getWidgetSettings(widgetId); $('CLOSE').mousedown(function(e) { e.stopPropagation();}).click(function() { $td = $('table tr td input:hidden').filter(function() { return this.value == widgetId;}).parent('td'); if (confirm('This widget will be removed, ok?')) { $td.find(':checkbox').removeAttr('disabled').removeAttr('checked');` — Anyname Donotcare, Feb 26 '12 at 10:12
I think that you'll need to do some debugging on your own here, with IE9's `console.log()`, to check different values and whatnot, see if they're what you expect (of if you're getting errors at all). — Jared Farrish, Feb 26 '12 at 10:27

Why can't I enable and uncheck an element with jQuery?

EDIT 1:

4 Answers4

Update