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" />

Answer 1

您应该使用prop更改选中的属性。

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