Disable a div on selecting an option from a drop down menu in HTML

Question

I want a div to become disabled when I select a specific option from a dropdown menu.

I have tried a code from a Website code here. It worked on the website but it doesn't work on my pc.

<html>
<head>
<style>
fieldset {
transition: opacity 200ms;
}

fieldset[disabled] {
opacity: 0.5;
}

[disabled] .ws-errormessage {
color: #eee;
}

</style>
<script type="text/javascript" src="test.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
webshims.polyfill('forms');
$(function() {
var enableDisable = function() {
$('option', this).each(function() {
$($.prop(this, 'value')).prop('disabled', !$.prop(this, 'selected'));
});
};
$('.payvia').on('change', enableDisable).each(enableDisable);
});

</script>
</head>

<body>
<form action="#">
<label for="payvia">Select payment method-</label>
<select required id="payvia" class="payvia">
<option name="select2" value="" disabled="disabled" selected="selected">select method</option>
<option value="#cash">Cash</option>
<option value="#chkdd">Cheque or Demand Draft</option>
</select>
<fieldset id="chkdd">
<label for="num">Cheque/DD number:</label>
<input required="" type="text" id="num"><br>
<label for="bank">Issuing bank:</label>
<input required="" type="text" id="bank"><br>
<label for="branch">Bank branch:</label>
<input required="" type="text" id="branch"><br>
<label for="date">Cheque/DD date:</label>
<input required="" type="date" id="date"><br>
</fieldset>
<input type="submit" />
</form>
</body>

Expected: I want a div to become disabled when I select a specific option from a dropdown menu. Actual: Just a form.

Maxime · Accepted Answer · 2019-04-08T06:17:08.227

This should work with javascript, try this code :

<html>
 <head>
  <style>
   fieldset {
   transition: opacity 200ms;
   }
   fieldset[disabled] {
   opacity: 0.5;
   }
   [disabled] .ws-errormessage {
   color: #eee;
   }
  </style>
  <script>
            function paymentMethodChange() {
                if (document.getElementById("payvia").value == "1"){
                    var cells = document.getElementsByClassName("cheque"); 
                    for (var i = 0; i < cells.length; i++) { 
                        cells[i].disabled = true;
                    }
                }     
                else{
                    var cells = document.getElementsByClassName("cheque"); 
                    for (var i = 0; i < cells.length; i++) { 
                        cells[i].disabled = false;
                    }
                }        
            }
  </script>
 </head>
 <body>
  <form action="#">
   <label for="payvia">Select payment method-</label>
   <select required id="payvia" class="payvia" onchange="paymentMethodChange()">
    <option name="select2" value=""  disabled selected="selected">select method</option>
    <option value="1">Cash</option>
    <option value="2">Cheque or Demand Draft</option>
   </select>
   <fieldset id="chkdd">
    <label for="num">Cheque/DD number:</label>
    <input required="" type="text" id="num" class="cheque"><br>
    <label for="bank">Issuing bank:</label>
    <input required="" type="text" id="bank" class="cheque"><br>
    <label for="branch">Bank branch:</label>
    <input required="" type="text" id="branch" class="cheque"><br>
    <label for="date">Cheque/DD date:</label>
    <input required="" type="date" id="date" class="cheque"><br>
   </fieldset>
   <input type="submit" />
  </form>
    </body>
</html>

Disable text box using class name in Javascript

score 0 · Answer 2 · answered Apr 07 '19 at 11:08

Since you use jQuery I took a different approach.

I would wrap everything store everything in a <div> you want to hide.

In general, this would look like this.

I listened for a select change
I determined which <option> tag was selected via a switch statement.
I hid the all other <div>-tags and showed only the selected <div>. This is done with the CSS Attribute display

I know this was a more general approach but I hope it helped you nevertheless.

The HTML Markup:

<select id="selector">
  <option selected value="example1">First Div</option>
  <option value="example2">Second Div</option>
</select>

<div id="example1">
   //nest your form here (or give your form the id)
</div>

<div id="example2">
   //nest your form here (or give your form the id)
</div>

And the JavaScript code (with jQuery):

$("#selector").on("change", () => {
  switch ($("#selector").val()) {
      case "example1":
        $("#example1").css("display","inline-block")
      $("#example2").css("display","none")
      break;
      case "example2":
        $("#example2").css("display","inline-block")
      $("#example1").css("display","none")
      break;
  }
})

Disable a div on selecting an option from a drop down menu in HTML

2 Answers2