enable textbox based on dropdown select do not work

Question

Somehow my textbox is still disabled regardless any selection from the dropdown can anyone help me on this problem. the code is stated as below.

          <div class ="container">
              <script>
                function changeTextBox()
                {
                         var val=$('#category').val();
                      if(val==='option1' || val==='option2'|| val==='option3' || val==='option4')
                      {
                         $('#subcategory').removeAttr("disabled");              
                      }
                      else{$('#subcategory').prop('disabled', true);}
                }
            </script>

        <form class="form-horizontal" role="form">
        <div    class="form-group">

            <label for="category" class="col-sm-2 control-label" id ="category">Category</label>
                <div class="col-sm-3">
                    <select class="form-control" id="category" name="category" onChange="changeTextBox();">
                        <option value="select">--select--</option>
                        <option value="Option1">Option1</option>
                        <option value="Option2">Option2</option>
                        <option value="Option3">Option3</option>
                        <option value="Option4">Option4</option>
                    </select>                   
                </div>
        </div>
        <div class="form-group">
            <label for="sub" class="col-sm-2 control-label">Sub Category Type</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="subcategory" disabled/>                 
                </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-1">
                <button type="submit" class="btn btn-default">Add</button>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-default">Edit</button>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-default">Delete</button>
            </div>
        </div>
    </form>
    </div>

Use `.prop('disabled', false)` instead of the `.removeAttr('disabled')`. Then check [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — Ram, Oct 16 '14 at 03:42

score 0 · Accepted Answer · answered Oct 16 '14 at 03:54

0

The reason it doesn't work is because you have set the id="category" for both the label and the select. Your id has to be unique! Remove the id from the label and all will work well. See this fiddle for example. Cheers!

answered Oct 16 '14 at 03:54

mark

1,725
1
15
14

enable textbox based on dropdown select do not work

1 Answers1