asp:Button disabled false for select on click doesn't work

Question

I've been stuck for a while, and I can't find a way to solve this problem.

I want to make a enable a <select> onClick button, but it doesn't work :

<div class="col-lg-12">

    <div class="form-group" style="overflow-y: scroll; height: auto; max-height: 545px;">

        <asp:Repeater ID="RepeaterCorrection" runat="server">

            <ItemTemplate>

                <label>
                    <asp:Literal ID="litCorLibelle" runat="server" Text='<%# Eval("DESCRIPTION")%>'></asp:Literal>
                </label>

                <asp:DropDownList ID="ddlCorChamp" runat="server" CssClass="form-control selectpicker"
                    data-live-search="true"></asp:DropDownList>
                <asp:RequiredFieldValidator ID="rfvDropDownList" ForeColor="Red" Display="Dynamic" runat="server"
                    ErrorMessage="Don't forget that field" ControlToValidate="ddlCorChamp"
                    InitialValue="Select something" />

                <p class="help-block"></p>

                <asp:HiddenField ID="hiddenCorIdChamp" runat="server" Value='<%# Eval("IDCHAMP") %>' />
                <asp:HiddenField ID="hiddenCorNameChamp" runat="server" Value='<%# Eval("NAMECHAMP")%>' />
                <asp:HiddenField ID="hiddenCorType" runat="server" Value='<%# Eval("TYPE")%>' />
            </ItemTemplate>

        </asp:Repeater>

    </div>

    <asp:Button ID="btnValid" runat="server" Text="Let's Enable this !"
        class="btn btn-primary btn-block" CausesValidation="False" UseSubmitBehavior="False" Enabled="True" />
</div>

//IT WORKS, IT IS DISABLED
$('Select[Champ=ID_REJECT]').prop('disabled', true);

//IT DOESN'T WORK, IT IS STILL DISABLED, EVEN WHEN I CLICK
$('#<%= btnValid.ClientID %>').click(function () {
    $('Select[Champ=ID_REJECT]').prop('disabled', false);
    //$('Select[Champ=ID_REJET]').removeAttr("disabled");
    //$('Select[Champ=ID_REJECT]').attr('disabled', false);
    return false;
});

I really don't get it why... Do you have any idea ?

Jamshaid K. · Answer 1 · 2020-10-29T13:53:48.247

There could be several reasons behind this few of them could be:

Reason 1
You are hard-coding the id of your button in your jquery event binding which could be a problem if your DOM is being modified, such as when you have a button inside of a ContentPlaceHolder. What you need to do is, modify your button event wiring like this:

$('#<%= btnValid.ClientID %>').click(function () {
    alert("Hey");
});

Reason 2
A server side button will always by default do postback and you might want to override this behavior by adding a return false; statement at the end of your event. Like this:

$('#<%= btnValid.ClientID %>').click(function () {
    alert("Hey");
    return false; // This will tell the event that we do not want to proceed further with posting the data to server.
});

Let me know if any of these two solutions help you out.

UPDATE

Since, you want to enable/disable your jquery select element, I would suggest using prop() method to achieve the desired.

$('#<%= btnValid.ClientID %>').click(function () {
    $('Select[Champ=ID_REJECT]').prop("disabled", false);
    return false;
});

Or you can remove the disabled attribute from the select element like below:

$('#<%= btnValid.ClientID %>').click(function () {
    $('Select[Champ=ID_REJECT]').removeAttr("disabled"); // this will entirely remove the attribute
    return false;
});

Hello ! Thank you for advices ! In fact, alert() works now. So I was trying to put my "real" code after that, & it doesn't work... I want to make a select enabled on click... — Hashka, Oct 29 '20 at 12:29
@Hashka You can simply follow the second reason and add `return false;` statement at the end of the file so you do not get a postback. — Jamshaid K., Oct 29 '20 at 13:36
@Hashka can I see this select element where `Champ=ID_Reject`? — Jamshaid K., Oct 29 '20 at 17:12

asp:Button disabled false for select on click doesn't work

1 Answers1