Javascript 如何启用和禁用带有切换的按钮

我在html中有一个已禁用的编辑按钮

<a href="#" disabled class="btn btn-default" id="editButton">Edit</a>
<table>
...
<tr class="clickable-row>...</tr>
...
</table>

})； 我可以选择一行，如果有选中的行，我想启用编辑按钮。并在不可用时禁用。但是代码不起作用。

使用prop，而不是attr

使用按钮元素的引导按钮将使用属性disabled禁用。 使用“禁用”类禁用使用元素的引导按钮。 如果将a元素更改为button元素，请使用以下方法：

jQuerydocument.readyfunction${ $.clickable-row.clickfunctionevent{ //$.clickable row.notthis.removeClass'selected'； $this.toggleClass'selected'； $editButton.propdisabled，！$this.hasClass'selected'； }; }; .可点击的行td{ 光标：指针； } 编辑

点击我！

---

尝试组合逻辑，而不是使用两个单击处理程序

jQuerydocument.readyfunction${ $.clickable-row.clickfunctionevent{ var$this=$this； var$editButton=$editButton； $.clickable row.notthis.removeClass'selected'； 如果选择了$this.hasclass{ $this.removeclasssselected； $editButton.propdisabled，true； }否则{ $this.addClassselected； $editButton.propdisabled，false； } }; }; a标记不支持disabled属性。你可以把它改成一个按钮

此外，还应该从其他行中删除选定的类，因为在触发“编辑”事件时有多个选定行会很麻烦

$.clickable行。clickfunction { $this.toggleClass selected.sides.removeClass'selected'； 如果$this.hasClass“已选定” { $editButton.removeAttrIsabled； } 其他的 { $editButton.attr'disabled'，'disabled'； } }; .选定 { 背景色：白烟； } 编辑 标题 第1单元 第2单元

---

如果您选择坚持使用a标记，您可以像下面这样严重重构您的单击事件：

$(".clickable-row").click(function (event) {
    //deselect other rows
    $(".clickable-row").not(this).removeClass('selected');
    //select this row
    $(this).toggleClass('selected');
    //set the button's "disabled" property based on the state of selected row; 
    //"disabled true" if row is selected, "disabled false" otherwise
    $("#editButton").prop("disabled", !$(this).hasClass('selected'));
    //and you can query the state of the button like this:
    console.log('Edit button '+ ($('#editButton').prop('disabled') ? 'disabled':'enabled'));
});

$("#editButton").prop("disabled", true);
$("#editButton").prop("disabled", false);

$(".clickable-row").click(function (event) {
    //deselect other rows
    $(".clickable-row").not(this).removeClass('selected');
    //select this row
    $(this).toggleClass('selected');
    //set the button's "disabled" property based on the state of selected row; 
    //"disabled true" if row is selected, "disabled false" otherwise
    $("#editButton").prop("disabled", !$(this).hasClass('selected'));
    //and you can query the state of the button like this:
    console.log('Edit button '+ ($('#editButton').prop('disabled') ? 'disabled':'enabled'));
});