Question

I am having an issue with the change function in jQuery 1.7.1 and postbacks. Basically I need to toggle the disabled attribute of buttons depending on whether an item is selected in the dropdown. In the code I have:

<input type="button" id="btnRed" value="show Red" disabled="disabled" class="spButton" />
<input type="button" id="btnBlue" value="show Blue"   disabled="disabled" class="spButton"/>
<input type="button" id="btnYellow" value="show Yellow" disabled="disabled"  class="spButton" />

I have my asp dropdown with autopostback set to true

<asp:DropDownList ID="selAccount" runat="server"  
    onselectedindexchanged="selAccount_SelectedIndexChanged" AutoPostBack="true">
    <asp:ListItem Value="-1">select me</asp:ListItem>
    <asp:ListItem Value="234">234</asp:ListItem>
</asp:DropDownList>

and the jQuery:

 $(document).ready(function () {
    $("#selAccount").change(function () {
        var selValue = $(this).val();

        if (selValue == '-1') {
            $(".spButton").attr("disabled", "disabled");
        }
        else {
            $(".spButton").removeAttr("disabled");
        }
    });
 });

invariably, when postback occurs, the buttons remain disabled. I tested with an enabled button and it is firing twice. i have tried different approaches (bin, unbind) to no avail. I got around this issue with a hidden variable set on the SelectedIndexChanged in code-behind and interrogating the hidden variable value in jQuery. is there an issue with the change method? is there a better way to do this? any insight would be appreciated. thanks,

Answer 1

If you are doing a postback each time the value is changed, then the page is reloaded and the changes made by jQuery are lost..

Either stop the auto-postback (set it to false), or if required change your code from the change event to the ready event..

$(function(){
    var selValue = $("#selAccount").val();

    if (selValue == '-1') {
        $(".spButton").attr("disabled", "disabled");
    }
    else {
        $(".spButton").removeAttr("disabled");
    }
});