Enable/Disable form elements based on dropdown list

Question

So I have been looking around at questions on here and I have gotten far enough to be able to disable a textbox by changing the selection of the dropdownlist, but I want to be able to enable it again if the dropdownlist goes back to its default value of <Select an Access Point>.

JQuery:

$('#selectAccessPoint').change(function () {
    if ($('#selectAccessPoint :selected').val != "2147483647")
        $('#newAccessPoint').attr('disabled', 'disabled');
    else {
        $('#newAccessPoint').removeAttr('disabled');
        $('#newAccessPoint').attr('enabled', 'enabled');
    }
});

HTML for textbox and dropdownlist: `

        <tr>
        <td><label for ="AccessPoint" class="xl">Access Point:</label></td>
            <td><%= Html.DropDownListFor(x => x.AccessPointsList.Id, Model.AccessPointsList.AccessPoints.OrderByDescending(x => x.Value.AsDecimal()), new { @id = "selectAccessPoint", @class = "info1"})%></td>
        </tr>
        <tr>
            <td><label for ="AccessPoint" class="xl">Or Add New:</label></td>
            <td><%= Html.TextBoxFor(x => x.AccessPointsList.AccessPoint, new { @id = "newAccessPoint", @class = "location info2 xl", maxlength = "250" }) %></td>
        </tr>

Generated HTML: <select class="info1" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="selectAccessPoint" name="AccessPointsList.Id"><option value="2147483647"><Select an Access Point></option> (there are more options in there but this is the one I am comparing against)

<input class="location info2 xl" id="newAccessPoint" maxlength="250" name="AccessPointsList.AccessPoint" type="text" value="">

Notes: attr must be used as prop gives me an error and val() also gives me an error.

You can programmatically retrieve the version using $().jquery. I suggest carefully reading through the API as there are a number of elementary errors here. — Matt Ball
– Matt Ball, Commented May 15, 2013 at 15:37
@Jared you can do it right in the console.. hit F12 - type in the console and run — wirey00
– wirey00, Commented May 15, 2013 at 15:41
@Jared that's actually your choice.. but it just makes more sense to check the value of the select instead of the text since the value attribute has it's purpose.. the reason why your selector isn't working is because missing $ in front ('#selectAccessPoint:selected') and also missing the space between selectAccessPoint :selected - then missing () after the text.. but it would be much easier to troubleshoot if we could see the actual generated HTML — wirey00
– wirey00, Commented May 15, 2013 at 16:05

palaѕн · Accepted Answer · 2013-05-15 16:28:46Z

7

Using jquery v1.9.1

$('#selectAccessPoint').change(function () {
    if ($(this).find('option:selected').text() != '<Select an Access Point>') {
        $('#newAccessPoint').prop('disabled', true);
    } else {
        $('#newAccessPoint').prop('disabled', false)
    }
});

$('#selectAccessPoint:selected') not correct. It should be $('#selectAccessPoint option:selected')
.text not correct. It should be .text()
To disable a textbox simply use this prop('disabled', true) using the jquery v1.9.1.
To enable a textbox simply use this prop('disabled', false).

Using jquery v1.4.4

$('#selectAccessPoint').change(function () {
    if ($(this).find('option:selected').text() != 'Select an Access Point') {
        $('#newAccessPoint').attr('disabled', 'disabled');
    } else {
        $('#newAccessPoint').attr('disabled', '')
    }
});

edited May 15, 2013 at 16:28

answered May 15, 2013 at 15:35

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jfabs Over a year ago

My version of jquery does not support prop or the text method. Thank you though.

Jfabs Over a year ago

I see that, and I understand that it will work for newer versions of jquery, but this application only has 1.4.4 and its not up to me to change that. I have to work with what I've got. Thank you.

palaѕн Over a year ago

@Jared OK let me see that.

Jfabs Over a year ago

What would you like to see?

palaѕн Over a year ago

@Jared: I was tryin to work on the fiddle with jquery v1.4.4 but there is no option for that version :/

|

Josh Balcitis · Accepted Answer · 2013-05-15 15:50:32Z

1

You might want to try something like this

HTML

<select name="foo" id="foo" onChange="javascript:changeTextBoxState(this)">
  <option>Select Something</option>
  <option>FooBar</option>
</select>

<input name="bar" id="bar" type="text" />

jQuery

function changeTextBoxState(dropDown) {

  switch (dropDown.value) {
    case 'Select Something': {
       $('#bar').removeAttr("disabled");
    }
    case 'FooBar': {
       $('#bar').addAttr('disabled', 'disabled');
    }
  }
}

There is no enabled attribute on input tag only disabled.

Hope this helps

answered May 15, 2013 at 15:50

Josh Balcitis

4986 silver badges19 bronze badges

1 Comment

Jfabs Over a year ago

I might have to. I was just hoping to try and keep this strictly to JQuery but that's not a very big change. Hmmm.

Collectives™ on Stack Overflow

Enable/Disable form elements based on dropdown list

2 Answers 2

Using jquery v1.9.1

Using jquery v1.4.4

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using jquery v1.9.1

Using jquery v1.4.4

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related