JavaScript disabled attribute not the same as Enabled attribute?

Question

I'm having some weird issues with the disabled attribute of an asp button and JavaScript, probably due to my lack of experience, but anyway...

As I understand from this question/answer, setting the disabled attribute makes the element disabled. Unless you set it like so; element.disabled = false;

So, that's what I do in my code;

<script type="text/javascript">
    function CheckOne(inChkBox) {
        ... irrelevant code goes here ...
        var rejectButton = document.getElementById('btnReject');
        if (inChkBox.checked) {
            rejectButton.disabled = false;
            rejectButton.className = 'Enabled';
        } else {
            rejectButton.disabled = true;
            rejectButton.className = 'Disabled';
        }
    }
</script>
<input type='checkbox' name='chkRejectLineItem' onchange='CheckOne(this);' runat="server"/>

This seems to trigger and work fine (the cssclass changes at the very least...) apart from the fact that my button is still disabled;

<asp:Button ID="btnProjectTimeReject" runat="server" Text="Reject Selected" OnClientClick="LineItemRejectReason();"  OnClick="btnProjectTimeReject_Click" Enabled="False" CssClass="Disabled"/>

I know this, because the OnClientClick never gets called (for some reason, the server side code still gets called??). If I set the button to Enabled="True" then everything works as expected.

Is it because I'm using Enabled="True" initially and I should instead use rejectButton.removeAttribute('disabled') in the enable/disable JavaScript?

score 0 · Accepted Answer · edited May 23 '17 at 12:29

After a lot of console debugging and googling the same thing different ways, I found the following solution/answer.

var rejectButton = document.getElementById('btnPLReject');
if (inChkBox.checked) {
    rejectButton.disabled = false;
    rejectButton.className = 'Enabled';
    $('#btnPLReject').bind("click", function() { LeaveRejectReason(); });
} else {
    rejectButton.disabled = true;
    rejectButton.className = 'Disabled';
}

This causes the button to trigger the JavaScript/Client side code AND then the Server side code...where as it was only doing the Server side code before...

I need some panadol now.

JavaScript disabled attribute not the same as Enabled attribute?

1 Answers1