How to properly disable and enable input field by option in HTML & JQUERY

Question

How do I properly disable and enable form elements using jquery. I need to enable an input ("#byremaining") when I click on the "remaining" option. When i click the other options the input ("#byremaining") should be disabled again.

<html>

    <head>
    <script src="jq.js"></script>

    <script> 
    $(document).ready(function() {
    $('#byremaining').attr('disabled','disabled');
    });

    $(function(){

    $('#remaining').click(function(){
        $('#byremaining').removeAttr('disabled');
    });

    });
    </script>

    </head>
    <body>
    Sort by:
    <select name="plaats" id="plaats">
        <option value="plaats1">plaats1</option>
        <option value="plaats2">plaats2</option>
        <option value="plaats3">plaats3</option>
        <option value="plaats4">plaats4</option>
        <option value="remaining" id="remaining">remaining</option>
    </select>
    <br/>
    date range:<br/>

    Remaining:<input type="text" value="" name="byremaining" id="byremaining"></input><br/>

    </body>

    </html>

The remove attribute won't work now and i haven't created the disabled again.

guradio · Accepted Answer · 2016-05-18 09:33:27Z

3

$(document).ready(function() {
  $('#byremaining').prop('disabled', true); //use prop

  $('#plaats').change(function() {
    var selected = $('option:selected', this).attr('id')
    if (selected == 'remaining') { //if selected option is remaining 
      $('#byremaining').prop('disabled', false); //use prop
    } else {
      $('#byremaining').prop('disabled', true); //use prop
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sort by:
<select name="plaats" id="plaats">
  <option value="plaats1">plaats1</option>
  <option value="plaats2">plaats2</option>
  <option value="plaats3">plaats3</option>
  <option value="plaats4">plaats4</option>
  <option value="remaining" id="remaining">remaining</option>
</select>
<br/>date range:
<br/>Remaining:

<input type="text" value="" name="byremaining" id="byremaining"></input>
<br/>

Use change event for select
Use .prop()

edited May 18, 2016 at 9:33

answered May 18, 2016 at 9:26

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

6 Comments

Satyaki Chatterjee Over a year ago

where is toggle functionality?

guradio Over a year ago

$('#byremaining').prop('disabled', false); this part @SatyakiChatterjee use .prop()

Satyaki Chatterjee Over a year ago

Sorry I think this is not toggling.. because if you select remaining then it is enabled but you need to disable this for other selections.. may be I am missing something

guradio Over a year ago

@SatyakiChatterjee can you check again?

j. Cup Over a year ago

@guradio Thanks for the information, it was really useful!! I added something more now, when i click on the others (plaats1, plaats2, etc) then it is disabled again!

|

Dhara Parmar · Accepted Answer · 2016-05-18 09:23:33Z

1

You can do it using change event of plaats:

$("#plaats").change(function() {
   var val = $(this).val();
   if(val == 'remaining') {
      $("#byremaining").removeAttr('disabled');
   } else {
      $("#byremaining").attr('disabled','disabled');
   }
});

answered May 18, 2016 at 9:23

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Comments

Yahya · Accepted Answer · 2016-05-18 09:26:04Z

1

Why not just toggle the state on the event trigger

if($("#byremaining").is("[disabled=disabled]"))
{
    $('#byremaining').removeAttr('disabled');
}
else
{
    $('#byremaining').attr('disabled','disabled');  
}

answered May 18, 2016 at 9:26

Yahya

3,4743 gold badges25 silver badges42 bronze badges

Comments

DenseCrab · Accepted Answer · 2016-05-18 09:25:34Z

0

Use prop()

Disable:

("#byremaining").prop("disabled", true );

Enable:

("#byremaining").prop("disabled", false);

answered May 18, 2016 at 9:25

DenseCrab

1,31311 silver badges22 bronze badges

Comments

Pugazh · Accepted Answer · 2016-05-18 09:27:18Z

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="jq.js"></script>

  <script>
    $(function() {
      $('#plaats').change(function() {
        var i = $(this).val();
        if (i == "remaining")
          $('#byremaining').prop('disabled', false);
        else
          $('#byremaining').prop('disabled', true);
      });
    });
  </script>

</head>

<body>
  Sort by:
  <select name="plaats" id="plaats">
    <option value="plaats1">plaats1</option>
    <option value="plaats2">plaats2</option>
    <option value="plaats3">plaats3</option>
    <option value="plaats4">plaats4</option>
    <option value="remaining" id="remaining">remaining</option>
  </select>
  <br/>date range:
  <br/>Remaining:

  <input type="text" value="" name="byremaining" id="byremaining"></input>
  <br/>

</body>

</html>

kiran gadhvi · Accepted Answer · 2016-05-18 09:35:47Z

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


    <script> 
    $(document).ready(function() {
        $('#plaats').click(function(){
         var a =  $('#plaats').val();
            if (a == "remaining") {
                 $('#byremaining').attr('disabled','disabled');
             }
             else
             {
                 $('#byremaining').removeAttr('disabled');
             }
        });

    });


    </script>

    </head>
    <body>
    Sort by:
    <select name="plaats" id="plaats">
        <option value="plaats1">plaats1</option>
        <option value="plaats2">plaats2</option>
        <option value="plaats3">plaats3</option>
        <option value="plaats4">plaats4</option>
        <option value="remaining" id="remaining">remaining</option>
    </select>
    <br/>
    date range:<br/>

    Remaining:<input type="text" value="" name="byremaining" id="byremaining"></input><br/>

    </body>

    </html>

Collectives™ on Stack Overflow

How to properly disable and enable input field by option in HTML & JQUERY

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related