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

Use prop , not attr .

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

Answer 2

• 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 3

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 4

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 5

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