Question

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

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

并且在js中我进行切换以选择表格中的行

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");
});

}）; 我可以选择它有效的行，如果有选定的行，我想启用编辑按钮。如果没有，则禁用。但代码不起作用。

Answer 1

使用prop，而不是attr。

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

Answer 2

使用button属性禁用使用disabled元素的引导按钮。
使用a类禁用使用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并将该类disabled添加到该按钮。

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类，因为在“编辑”事件触发时有多个选定的行会很麻烦。

$( ".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标记，则可以使用Kosh Very's answer严格重构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'));
});

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

5 个答案: