复选框已选中属性，但不显示为已选中

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