checkbox has checked attribute but doesn't show checked

Question

Something strange is going on with my code. I have two buttons one with a class .add and .remove there is a checkbox that toggles on and off due to which button is pressed, so if you remove with the remove button the checked gets checked otherwise the checkbox get's unchecked, the problem I'm having is when you reuse the .remove button it adds checked attribute but the checkbox doens't show it's checked but in the html it's attribute is there. does anyone know how to fix this

$('.variations_grid').on( 'click','.add', function(e) {
    var elements = $(this).closest('tr').find('td');
    var isDisabled = $(this).closest('tr').find('button.remove').is(':disabled')

    if(isDisabled) {
        $(this).closest('tr').removeClass('remove')
        $(this).closest('tr').find('.add').attr('disabled', 'disabled');
        $(this).closest('tr').find('button.remove').removeAttr('disabled');
        $(this).closest('tr').find('.delete:checkbox').attr('checked', false);
    } else {
        $(this).closest('tr').before(template);     
    }
    $.each(elements, function(index, element) {
        if(index > 1) {
            //$(this).find('select').removeAttr('disabled');
            //$(this).find('input').removeAttr('disabled')
        }
    });
});

$('.variations_grid').on( 'click','button.remove', function(e) {
    var elements = $(this).closest('tr').find('td');

    $(this).closest('tr').addClass('remove')
        $(this).closest('tr').find('.add').removeAttr('disabled');
        $(this).closest('tr').find('.remove').attr('disabled', 'disabled');
        $(this).closest('tr').find('.delete:checkbox').attr('checked', 'checked');  

    $.each(elements, function(index, element) {
        if(index > 1) {
            //$(this).find('select').attr('disabled', 'disabled');
            //$(this).find('input').attr('disabled', 'disabled')
        }
    });
});

html

<button class="btn btn-default btn-block add" type="button" disabled="disabled">&nbsp;<span class="glyphicon glyphicon-plus-sign"></span>&nbsp;</button>
<button class="btn btn-default btn-block remove" type="button">&nbsp;<span class="glyphicon glyphicon-minus-sign"></span>&nbsp;</button>
<input name="delete" type="checkbox" class="delete" />

Amit Joki · Accepted Answer · 2014-10-05 05:59:34Z

2

You should be using prop to change the checked property.

.prop('checked' , true); // or false

answered Oct 5, 2014 at 5:59

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

1 Comment

ONYX Over a year ago

Ah thankyou another one to remember thanks for you're answer it did the trick

Collectives™ on Stack Overflow

checkbox has checked attribute but doesn't show checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related