javascript - 无法使用jquery交换复选框上按钮的属性

Question

我正在使用 jquery 启用/禁用复选框的选择/取消选择按钮。有两组按钮，一组是“删除”，只删除一条记录，“删除多条”，删除所有选中的记录。

问题是当我选中一个或多个复选框时，“删除”按钮会禁用(仅样式)但仍然有效。当我取消选中复选框时，“删除多个”按钮会取消(同样只有样式)并且“删除”按钮不会启用。我正在使用物化。

代码如下:

HTML 代码:

@foreach($engines as $engine)
    <td>
      <a class="waves-effect waves-light btn red modal-trigger searchDelete" href="#searchDelete" data-id="{{$engine->id}}" data-name="{{$engine->name}}">Delete</a>
    </td>
    <td>
        <div class="row">
            <div class="switch">
                <label>
                    <input type="checkbox" name="ids" class="id-search" value="{{$engine->id}}">
                    <span class="lever"></span>
                </label>
            </div>
        </div>
    </td>
@endforeach

J查询代码:

$('.id-search').on('change',function () {
var ids = [];
$('input:checkbox[name=ids]:checked').each(function () {
    ids.push($(this).val());
});
var length = ids.length;
if (length > 0) {
    $('#deleteMultipleSearch').attr('class','btn waves-effect waves-light red modal-trigger');
    $('.searchDelete').attr('class', 'btn disabled');
    $('.searchDelete').removeAttr('class', 'modal-trigger searchDelete');
    console.log("Id clicked");
}
else {
    $('#deleteMultipleSearch').attr('class', 'btn disabled');
    $('.searchDelete').removeAttr('class', 'btn disabled');
    $('.searchDelete').attr('class', 'btn red');
}
});

Answer 1

我认为问题在于您应该使用 Jquery addClass 和 removeClass API 而不是 attr 和 removeAttr 来操作类...试试这个 javascript 代码

$('.id-search').on('change',function () {
    var ids = [];
    $('input:checkbox[name=ids]:checked').each(function () {
        ids.push($(this).val());
    });
    var length = ids.length;
    if (length > 0) {
        $('#deleteMultipleSearch').addClass('btn waves-effect waves-light red modal-trigger');
        $('.searchDelete').addClass('btn disabled');
        $('.searchDelete').removeClass('modal-trigger searchDelete');
        console.log("Id clicked");
    }
    else {
        $('#deleteMultipleSearch').addClass('btn disabled');
        $('.searchDelete').removeClass('btn disabled');
        $('.searchDelete').addClass('btn red');
    }
});

祝你好运