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>

Disable text box using class name in Javascript

Answer 2

自从您使用jQuery以来，我采取了另一种方法。

我会把所有东西都包裹起来，将所有东西都存储在要隐藏的<div>中。

通常看起来像this。

我听了一个选择更改
我确定是通过<option>语句选择了哪个switch标签。
我隐藏了所有其他<div>标签，并仅显示所选的<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 个答案: