Question 220445 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Disable two input fields on the basis of selection from a dropdown list

I have the following HTML form with 5 fields, in which one is a drop down list with two option (ward and room) and 4 other input text fields. I am trying to achieve that if I select ward from list, then room no and room name should be disabled. And if select Room from list then ward no and wardname should be disabled. Can I have a few bits of advice on how to achieve this?

$("select").change(function() {
  if ($(this).val() == ward) {
    $(".abc").attr("disabled", "disabled");
    $(".abc1").attr("disabled", "disabled");
  } else {
    $(".roomno").attr("disabled", "disabled");
    $(".roomname").attr("disabled", "disabled");
  }
}).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <form method="post" action="">
    <label>Sub Department :</label>
    <select id="type">
          <option value="ward">Ward</option>
          <option value="room">Room</option>
           </select>
    <label> Ward No<input type  = "text" name "abc" id = "abc">
    <label> Ward Name <input type  = "text" name "abc1" id = "abc1">
    <label> Room No<input type  = "text" name "roomno" id = "roomno">
    <label> Room Name <input type  = "text" name "roomname" id = "roomnam">
    </form>
    </body>
    </html>
Tags:

2

Answers


  1. 0

    When you disable one set of inputs you have to enable the other set.

    Other problems:

    • You have to put ward in quotes to make it a string.
    • You have to use # to select by ID. . is for classes.
    • You had no <option> in your <select>
    • You were missing all the </label>
    • You were missing = after all the name.
    $("select").change(function() {
  if ($(this).val() == 'ward') {
    $("#abc, #abc1").removeAttr("disabled");
    $("#roomno, #roomname").attr("disabled", "disabled");
  } else {
    $("#abc, #abc1").attr("disabled", "disabled");
    $("#roomno, #roomname").removeAttr("disabled");
  }
}).trigger("change");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <form method="post" action="">
    <label>Sub Department :</label>
    <select name="wardroom" id="wardroom">
      <option value="ward">Ward</option>
      <option value="room">Room</option>
    </select>
    <br>
    <label> Ward No<input type  = "text" name="abc" id = "abc"></label>
    <label> Ward Name <input type  = "text" name="abc1" id = "abc1"></label>
    <br>
    <label> Room No<input type  = "text" name="roomno" id = "roomno"></label>
    <label> Room Name <input type  = "text" name="roomname" id = "roomname"></label>
  </form>
</body>

</html>
    Login or Signup to reply.
  2. 0 
    $("select").change(function() {
  if ($(this).val() == 'ward') {
    $("#abc, #abc1").removeAttr("disabled");
    $("#roomno, #roomname").attr("disabled", "disabled");
  } else {
    $("#abc, #abc1").attr("disabled", "disabled");
    $("#roomno, #roomname").removeAttr("disabled");
  }
}).trigger("change");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <form method="post" action="">
    <label>Sub Department :</label>
    <select name="wardroom" id="wardroom">
      <option value="ward">Ward</option>
      <option value="room">Room</option>
    </select>
    <br>
    <label> Ward No<input type  = "text" name="abc" id = "abc"></label>
    <label> Ward Name <input type  = "text" name="abc1" id = "abc1"></label>
    <br>
    <label> Room No<input type  = "text" name="roomno" id = "roomno"></label>
    <label> Room Name <input type  = "text" name="roomname" id = "roomnam"></label>
  </form>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search