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

Question

我在 html 中有一个编辑按钮被禁用了。

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

并且在 js 中，我在 table

中切换到 select 一行

jQuery(document).ready(function ($) {
    $(".clickable-row").click(function (event) {
        $(".clickable-row").not(this).removeClass('selected');


$(this).toggleClass('selected');
});

$(".clickable-row").click(function (event) {
    event.preventDefault();
    if ($(this).hasClass('selected'))
        $("#editButton").removeAttr("disabled");
    else
        $("#editButton").attr("disabled");
});

}); 我可以 select 行，如果有 selected 行，我想启用编辑按钮。并在不是时禁用。但代码不起作用。

Answer 1

使用 prop，而不是 attr。

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

Answer 2

Bootstrap 使用 button 元素的按钮使用属性 disabled.
Bootstrap 使用 a 元素的按钮被禁用 class disabled.

如果将 a 元素更改为 button 元素，请使用此方法：

jQuery(document).ready(function($) {
  $(".clickable-row").click(function(event) {
    //$(".clickable-row").not(this).removeClass('selected');
    $(this).toggleClass('selected');
    $("#editButton").prop("disabled", !$(this).hasClass('selected'));
  });
});

.clickable-row td {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button disabled class="btn btn-default" id="editButton">Edit</button>
</p>
<table>
  <tr class="clickable-row">
    <td>Click me!</td>
  </tr>
</table>

如果需要使用a元素，去掉属性disabled，在按钮中添加classdisabled .

jQuery(document).ready(function($) {
  $(".clickable-row").click(function(event) {
    //$(".clickable-row").not(this).removeClass('selected');
    $(this).toggleClass('selected');
    
    if ($(this).hasClass('selected')) {
      $("#editButton").removeClass('disabled');
    } else {
      $("#editButton").addClass('disabled');
    }
  });
});

.clickable-row td {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="disabled btn btn-default" id="editButton">Edit</a>
</p>
<table>
  <tr class="clickable-row">
    <td>Click me!</td>
  </tr>
</table>

Answer 3

尝试组合您的逻辑，而不是使用两个点击处理程序。

jQuery(document).ready(function($) {
  $(".clickable-row").click(function(event) {
    var $this = $(this);
    var $editButton = $("#editButton");

    $(".clickable-row").not(this).removeClass('selected');

    if ($this.hasClass("selected")) {
      $this.removeClass("selected");
      $editButton.prop("disabled", true);
    } else {
      $this.addClass("selected");
      $editButton.prop("disabled", false);
    }
  });
});

Answer 4

a 标签不支持 disabled 属性。为此，您可以将其更改为 button。

此外，您应该从其他行中删除 selected class，因为在 "edit" 事件触发时选择多个行会很麻烦。

$( ".clickable-row" ).click(function()
{
  $( this ).toggleClass( "selected" ).siblings().removeClass('selected');
  
  if ($(this).hasClass('selected'))
  {
    $("#editButton").removeAttr("disabled");
  }
  
  else
  {
    $("#editButton").attr('disabled','disabled');
  }
});

.selected
{
  background-color: whitesmoke;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button href="#" class="btn btn-primary" id="editButton" disabled>Edit</button>
      
<table class="table">
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>Cell #1</td>
    </tr>
    <tr class="clickable-row">
      <td>Cell #2</td>
    </tr>
  </tbody>
</table>

Answer 5

如果您选择使用 a 标签，使用您可以像这样认真地重构您的 click 事件：

$(".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'));
});

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

How to enable and disable a button with toggle

html

javascript

jquery

toggle