CODEWITHSUNDEEP
javascriptjquery
OleHansen
OleHansen

Reputation: 111

Attr disable won't disable my button

I'm having the following error:

I have a script that checks if 2 fields are the same, but the "register" button is clickable all time, whereas it should be un-clickable until all fields are like they should be.

My full code:

$(document).ready(function () {
    $('#registerModel_MemberProperties_0__Value').keyup(function () {
        checkpassword($('#registerModel_Password'), $(this));
    });

    $('#registerModel_Password').keyup(function () {
        checkpassword($(this), $('#registerModel_MemberProperties_0__Value'));
    });

    $('#registerModel_MemberProperties_0__Value').prop("type", "password").addClass("form-control")
    function checkpassword(password, confirmpassword) {
        var button = $('#Registerbutton');
        button.attr("disabled", false);
        if ($(password).val() == $(confirmpassword).val()) {
            button.attr("disabled", false);
        } else {
            button.attr("disabled", true);
        }
    }
});

My code for the disable button:

button.attr("disabled", false);

HTML added:

<div class="row">
    <div class="col-sm-12">
        <fieldset>
            @Html.ValidationSummary("registerModel", true)
            @Html.LabelFor(m => registerModel.Name)
            @Html.TextBoxFor(m => registerModel.Name, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => registerModel.Name)
            <br />
            @Html.LabelFor(m => registerModel.Email)
            @Html.TextBoxFor(m => registerModel.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => registerModel.Email)
            <br />
            @Html.LabelFor(m => registerModel.Password)
            @Html.PasswordFor(m => registerModel.Password, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => registerModel.Password)
            <br />
            @if (registerModel.MemberProperties != null)
            {
                for (var i = 0; i < registerModel.MemberProperties.Count; i++)
                {
                    @Html.LabelFor(m => registerModel.MemberProperties[i].Value, registerModel.MemberProperties[i].Name)

                    @Html.EditorFor(m => registerModel.MemberProperties[i].Value)
                    @Html.HiddenFor(m => registerModel.MemberProperties[i].Alias)
                    <br />
                }
            }
            @Html.HiddenFor(m => registerModel.MemberTypeAlias)
            @Html.HiddenFor(m => registerModel.RedirectUrl)
            @Html.HiddenFor(m => registerModel.UsernameIsEmail)
            <button class="btn btn-success" id="Registerbutton">Sign up</button>
        </fieldset>
    </div>
</div>

Upvotes: 1

Views: 200

Answers (5)

OleHansen
OleHansen

Reputation: 111

Allright i fixed it with this:

$('#Registerbutton').attr("disabled", "disabled");

What i needed to do was to function the button over my 

$(document).ready(function () {

Then it worked! Thanks for the help!

Upvotes: 1

ahervin
ahervin

Reputation: 461

Change this line 

 button.attr("disabled", false);

To this 

button.prop("disabled", true);

Look at this fiddle

Upvotes: 1

markpsmith
markpsmith

Reputation: 4918

$('#Registerbutton').attr("disabled", "disabled");

working demo

Upvotes: 1

nestedl00p
nestedl00p

Reputation: 490

Use .prop() instead of .attr()

$('#Registerbutton').prop('disabled', true);

or 

button.prop('disabled', true);

Upvotes: 1

Souban.AB
Souban.AB

Reputation: 23

button.attr('disabled','disabled'); will do the work. If You want to remove The disable, button.removeAttr('disabled'); will do the trick.

Upvotes: 1

Related Questions