How make input disable/enable with selecting option?

Question

I am trying to make input enable when some option is selected from the drop-down

I wrote code for solving this problem, but it doesn't work. Here is my code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>

<select class="form-control" id="dropDown">
      <option id="n" value="0"> Тип N </option>
      <option id="p" value="1"> Тип P </option>
      <option id="c" value="2"> Тип C </option>
      <option id="v" value="3"> Тип V </option>
      <option id="t" value="4"> Тип T </option>
      <option id="s" value="5"> Тип S </option>
</select>

   <div>
      <label class="control-label">
          <span th:text="#{size}"></span>
      </label>
     <input id="size" type="text" class="form-control" />
   </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script th:inline="javascript">

  $('#dropdown').change(function() {
       if( $(this).val() === 1) {
           $('#size').props( 'disabled', false );
       } else {
            $('#size').props( 'disabled', true );

        }
    });

</script>
</body>
</html>

So I'm expecting that when I select the option "Тип P" input (id="size") should be enabled, if other options selected it should stay disabled

There's no such method in jQuery as .props(). And you have $('#dropdown') but the ID is dropDown (note the case) — j08691
– j08691, Commented Apr 22, 2019 at 13:23

Mamun · Accepted Answer · 2019-04-22 13:33:05Z

2

=== is strictly equality operator, it checks both value and type, and as the value of an element is always a string, comparing it to a number will always fail.

Please Note: You also have typo in props, should be prop. The attribute id used in the control (dropDown) and code (dropdown) does not match with each other.

Change

if( $(this).val() === 1) {

To

if( $(this).val() === "1") {

edited Apr 22, 2019 at 13:33

answered Apr 22, 2019 at 13:22

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Junius L Over a year ago

he's also using props instead of prop

Maheer Ali · Accepted Answer · 2019-04-22 13:31:10Z

You are making three mistakes:

this.val() returns a string but you are comparing it with a number 1.
There is a little typo $('#dropdown') should be $('#dropDown')
Secondly use prop instead of props

You are setting true and false so you can direclty pass the condition to prop()

$('#dropDown').change(function() {
     $('#size').prop( 'disabled', $(this).val() !== "1" )
});

$('#dropDown').change(function() {
     $('#size').prop( 'disabled', $(this).val() !== "1" )
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>

<select class="form-control" id="dropDown">
      <option id="n" value="0"> Тип N </option>
      <option id="p" value="1"> Тип P </option>
      <option id="c" value="2"> Тип C </option>
      <option id="v" value="3"> Тип V </option>
      <option id="t" value="4"> Тип T </option>
      <option id="s" value="5"> Тип S </option>
</select>

   <div>
      <label class="control-label">
          <span th:text="#{size}"></span>
      </label>
     <input id="size" type="text" class="form-control" />
   </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script th:inline="javascript">


</script>
</body>
</html>

You can shorten your function by using ternary operators.

Collectives™ on Stack Overflow

How make input disable/enable with selecting option?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related