Enable/disable input box based on selection

Question

I want to make this textbox enabled when I choose a specific value from a select drop-down, and disabled when I select any other option.

This is my html:

<select name="status" id ="combo">
      <option value="_">Please choose..</option>
        <option  value="Pending">Pending</option>
        <option  value="Process">Process</option>
        <option  value="Delivered" >Delivered</option>
      </select>
 <tr valign="baseline">
 <td nowrap="nowrap" align="right" class="postage" >Postage:</td>
 <input type="text" name="postage" id="textbox" >

You need javascript or javascript library named jquery to do it :-) I can write you the script. — Redrif
– Redrif, Commented Apr 20, 2015 at 15:27
Can you show what you've attempted so far? P.S. This is not valid HTML. You can't have a <select> as a sibling of a <tr> and you can't have an <input> as a child of a <tr> — CodingIntrigue
– CodingIntrigue, Commented Apr 20, 2015 at 15:27
@Redrif Adding jQuery to a project for the simple task at hand is an overkill. It is bad advise to tell people "add jQuery" as a solution to every problem. jQuery is great, I use it on my projects when it is necessary, but adding it should be a decision you make based on the entire project and target deployment platforms. We simply don't have enough information here to make that kind of suggestion. jQuery is thousands of lines of code, adding it to do one basic task is like using a chainsaw to cut a birthday cake. — Chris Baker
– Chris Baker, Commented Apr 20, 2015 at 15:29
@Redrif I stand by the advice, though on this particular question, jQuery should have been added to the tags. It was removed from the title by someone else, and they didn't add the tag when they did so. OP already, apparently, has jQuery :) — Chris Baker
– Chris Baker, Commented Apr 20, 2015 at 15:51

Abhi · Accepted Answer · 2015-04-20 15:29:28Z

3

Try this:

var select_element = document.getElementById( "combo" );
var selected = select_element.options[ select_element.selectedIndex ].value

if(selected == "Delivered"){
  document.getElementById("textbox").disabled = false;
}else{
  document.getElementById("textbox").disabled = true;
}

answered Apr 20, 2015 at 15:29

Abhi

4,2916 gold badges49 silver badges79 bronze badges

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

Comments

Tom Marulak · Accepted Answer · 2015-04-20 15:44:09Z

0

I saw the original title with jQuery but someone edited it. Anyway just incase you wondered how it's done in jQuery here it is:

 $(document).ready(function () {
        var $input = $('input[name=postage]');
        $input.attr('disabled', 'disabled');
        $('select[name=status]').on('change', function () {
            $input.attr('disabled', $(this).val() != "Delivered");
        });
    });

demo: http://jsfiddle.net/c4rks52r/

edited Apr 20, 2015 at 15:44

answered Apr 20, 2015 at 15:38

Tom Marulak

6734 silver badges11 bronze badges

3 Comments

Scott Smith Over a year ago

As noted by Chris Baker, user has not indicated having access to jQuery. Also, I believe you are supposed to use prop now as opposed to attr.

Chris Baker Over a year ago

@ScottSmith Actually, I just saw the edit history, someone DID take the word "jQuery" out of the title, without adding the tag. If marcel wants to undelete his answer, I'll retract my downvote.

Scott Smith Over a year ago

Ah nice catch, did not see that.

Scott Smith · Accepted Answer · 2015-04-20 16:25:48Z

0

This would be how I would do this using jQuery (demo here):

$(document).on('change', '#combo', function(){
    var shouldEnable = $(this).val() !== 'Delivered';
    $('#textbox').prop('disabled', shouldEnable);
});

Side note, did you ever say specifically which value being selected is the trigger for enabling? I just went with Delivered as everyone else went that route. Maybe I missed where you said that explicitly. Also, based on your description on wanting to enable it only when a specific value is selected, I assume you would want it disabled initially when the page loads. My demo has that in place.

answered Apr 20, 2015 at 16:25

Scott Smith

4173 silver badges11 bronze badges

Collectives™ on Stack Overflow

Enable/disable input box based on selection

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related