How enable or disable inputs uses jQuery based on the value of a select option?

Question

I have a select and two inputs. I want when I choose 2nd choice from the select element for the two inputs will be deactivated.

My code is below but the inputs are not being disabled, how do I get it to work?

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();
  if (stateID != 2) {
    $("divb").attr("disabled", true);
    $("divn").attr("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>

https://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery — epascarello, Sep 08 '20 at 02:10
https://stackoverflow.com/questions/6048022/jquery-attrdisabled-disabled-not-working-in-chrome — epascarello, Sep 08 '20 at 02:10

Always Helping · Accepted Answer · 2020-09-08T03:55:07.280

You are nearly there. You can use attr OR prop either one. The only thing you were doing wrong was you are disabling the actual divs but not the input itself. The disable property work only on inputs not the div elements

To disable the actual inputs we can jQuery decendant selector - Also, in your current jQuery code your are missing # selector sign as well.

Edit: Added prop method but you can use attr as well if you are only disabling the inputs

Here is an example of decendant selector

$("#divb > input").prop("disabled", true);
$("#divn > input").prop("disabled", true);

Live Working Code:

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();
  if (stateID == '2') {
    $("#divb > input").prop("disabled", true);
    $("#divn > input").prop("disabled", true);
  } else {
    $("#divb > input").prop("disabled", false);
    $("#divn > input").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>

score 0 · Answer 2 · answered Sep 07 '20 at 22:11

0

You can use this jQuery code:

$('#divb').prop('disabled', true);
$('#divn').prop('disabled', true);

answered Sep 07 '20 at 22:11

avia

1,527
7
19

to remove the `disabled` attribute, you could use `.removeAttr('disabled')` – avia Sep 07 '20 at 22:13

FluffyKitten · Answer 3 · 2020-09-08T03:48:06.900

There are 2 reasons that your jQuery is not disabling the inputs:

1. You need to use prop() and not attr() (which did work, but since jQuery v1.6 prop is the recommended method over attr for properties)

$(element).prop("disabled", true);

2. You are not using the selector correctly to select the element to disable:

you need to select the input. You're selecting the divb element which is the form-group
To select using an id you need to use # e.g. #divb or for a class you use . e.g. .form-control

To disable all inputs: input.form-control will select all of them so we can change them all together:

$("input.form-control").prop("disabled", true);

Full function code:

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();

  // disable all inputs when option 2 is selected, enable them otherwise
  if (stateID == 2) 
    $("input.form-control").prop("disabled", true);
  else
    $("input.form-control").prop("disabled", false);

});

To select the the inputs individually:

// using the id of the input itself
$("#entreprise").prop("disabled", true);

// this input has no id or class, so we can use name (but an id or class would be better)
$("input[name='piece']").prop("disabled", true);

Working Example:

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();

  if (stateID == 2) 
    $("input.form-control").prop("disabled", true);
  else
    $("input.form-control").prop("disabled", false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>

How enable or disable inputs uses jQuery based on the value of a select option?

3 Answers3