jqgrid disable an html button in loadComplete event

Question

I have a jqgrid in my page and outside the grid there is a button like the following:

<input type="button" id="mybutton" value="click here" />

On document ready I am disabling and hiding the button with the following code:

$(document).ready(function () {
    var btn = $('#mybutton');
    btn.prop('disabled', true);
    btn.hide();
    ...
    setupGrid();
});

setupGrid() is a function wich does the jqgrid setup and has this code in the loadComplete event

[...]
loadComplete: function() {
    //do some logic here and then...
    var btn = $('#mybutton');
    if ( mycustomlogic ) {
        btn.prop('disabled', false);
        btn.show();        
    }
}

but unfortunately the button is not enabled again after that. It is correctly showed when mycustomlogic evaluate to true but it remains in disabled state. I have also tried to use btn.attr('disabled', 'disabled') and btn.removeAttr('disabled') instead of .prop() with no luck.

Any suggestion?

Answer 1

When using jQuery UI buttons, it's best to use the api's methods to enable/disable the buttons http://api.jqueryui.com/button/

$(element).button('disable/enable')

That way it handles all the other changes for you besides just the disabled property