How to enable and disable a button with toggle

Question

I have an edit button in html that is disabled.

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

and in js i have make a toggle to select a row in table

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

}); i can select a row it works, and i want to enable the edit button if there is a selected row. and disable when it's not. but the code does not work.

Answer 1

If you choose to stick to the a tag, using Kosh Very's answer you could seriously refactor your click event like this:

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

Answer 2

The a tag doesn't support the disabled attribute. You can change it to a button for that purpose.

Also, you should remove the selected class from the other rows as it would be troublesome to have multiple selected rows when the "edit" event fires.

$( ".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 3

• Bootstrap buttons using button elements are disable using the property disabled.
• Bootstrap buttons using a elements are disabled using the class disabled.

If you change your a element to button element, use this approach:

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>

If you need to use a elements, remove the property disabled and add the class disabled to the button.

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 4

Try combining your logic rather than having two click handlers.

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 5

Use prop, not attr.

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