从HTML的下拉菜单中选择选项时禁用div

Question

我希望从下拉菜单中选择特定选项时禁用div。

我在这里尝试过网站代码中的代码。 它在网站上有效，但在我的电脑上不起作用。

<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>

预期：当我从下拉菜单中选择特定选项时，我希望div被禁用。 实际：只是一种形式。

Answer 1

这应该与javascript一起使用，请尝试以下代码：

 <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>

在Javascript中使用类名禁用文本框

Answer 2

由于您使用的是jQuery，因此我采用了不同的方法。

我会将所有内容包装起来，将所有内容存储在要隐藏的<div> 。

通常，这看起来像这样。

我听了一个选择的变化
我确定了通过switch语句选择了哪个<option>标记。
我隐藏了所有其他<div> -tags，只显示了选定的<div> 。 这是通过CSS属性display

我知道这是一种更通用的方法，但是我希望它能对您有所帮助。

HTML标记：

<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>

和JavaScript代码（使用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;
  }
})

从HTML的下拉菜单中选择选项时禁用div

问题描述

2 个解决方案

解决方案1
0 2019-04-07 10:15:08

解决方案2
0 2019-04-07 11:08:52

从HTML的下拉菜单中选择选项时禁用div

问题描述

2 个解决方案

解决方案1 0 2019-04-07 10:15:08

解决方案2 0 2019-04-07 11:08:52

解决方案1
0 2019-04-07 10:15:08

解决方案2
0 2019-04-07 11:08:52