jsp 如何通过 jstl 根据是否选中单选按钮启用和禁用下拉列表
how to enable and disable a dropdown list based on whether a radio button is checked or not through jstl in jsp
在 jsp 页面中,我有两个单选按钮,如果我选中一个单选按钮,则应启用一个下拉列表,如果我 select 另一个单选按钮,则应启用另一个下拉列表并且第一个下拉列表应该是 disabled.If none 单选按钮是 selected 那么两个下拉列表都应该被禁用。如何使用或标签 jstl.I 以这种方式尝试过,但没有结果
<b>Select Status</b>
<p><input type="radio" name="val" value="Filling" id="Filling"> Filling</p>
<p><input type="radio" name="val" value="Stored" id="stored"> Stored</p>
<c:choose>
<c:when test="${Filling}">
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
</c:when>
<c:otherwise>
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
</c:otherwise>
</c:choose>
编辑-
如何通过 javascript 完成,如果无法通过 jstl 完成。
<script type="text/javascript">
$(document).ready(function(){
$('input[name="val"]').click(function() {
if($('input[name="val"]').is(':checked')) {
var radioValue = $("input[name='val']:checked").val();
if(radioValue == "Filling"){
$( "#Fill" ).prop( "disabled", false );
$( "#stored" ).prop( "disabled", true );
} else {
$( "#Fill" ).prop( "disabled", true );
$( "#stored" ).prop( "disabled", false );
}
}
});
});
</script>
</head>
</head>
<body>
<jsp:useBean id="obj" class="ref_Database.Refernce_Database" />
<form method="post" action="All_Mps.jsp">
<b>Select Status</b>
<p><input type="radio" name="val" value="Filling" id="Filling"> Filling</p>
<p><input type="radio" name="val" value="Stored" id="stored"> Stored</p>
Select Reference:
<select name="ref_fill" id="Fill" disabled="disabled" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
Select Reference:
<select name="ref_stored" id="stored" disabled="disabled" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
<br><br>
<b>Select Date to be compared</b><br>
<p>
在HTML中这样使用,
<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
<br />
<select id="mOptions" disabled="true">
<option>Select</option>
<option value="1">Shirt</option>
<option value="2">Pant</option>
<option value="3">dhoti</option>
</select>
<select id="fOptions" disabled="true">
<option>Select</option>
<option value="4">Saree</option>
<option value="5">Bangle</option>
<option value="6">handbag</option>
</select>
在脚本中我使用了 jQuery 库,
$(document).ready(function(){
$('input[name="gender"]').click(function() {
if($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if(radioValue == "m"){
$( "#mOptions" ).prop( "disabled", false );
$( "#fOptions" ).prop( "disabled", true );
} else {
$( "#mOptions" ).prop( "disabled", true );
$( "#fOptions" ).prop( "disabled", false );
}
}
});
});
请使用此 link
找到有效的 FIDDLE
在 jsp 页面中,我有两个单选按钮,如果我选中一个单选按钮,则应启用一个下拉列表,如果我 select 另一个单选按钮,则应启用另一个下拉列表并且第一个下拉列表应该是 disabled.If none 单选按钮是 selected 那么两个下拉列表都应该被禁用。如何使用或标签 jstl.I 以这种方式尝试过,但没有结果
<b>Select Status</b>
<p><input type="radio" name="val" value="Filling" id="Filling"> Filling</p>
<p><input type="radio" name="val" value="Stored" id="stored"> Stored</p>
<c:choose>
<c:when test="${Filling}">
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
</c:when>
<c:otherwise>
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
</c:otherwise>
</c:choose>
编辑- 如何通过 javascript 完成,如果无法通过 jstl 完成。
<script type="text/javascript">
$(document).ready(function(){
$('input[name="val"]').click(function() {
if($('input[name="val"]').is(':checked')) {
var radioValue = $("input[name='val']:checked").val();
if(radioValue == "Filling"){
$( "#Fill" ).prop( "disabled", false );
$( "#stored" ).prop( "disabled", true );
} else {
$( "#Fill" ).prop( "disabled", true );
$( "#stored" ).prop( "disabled", false );
}
}
});
});
</script>
</head>
</head>
<body>
<jsp:useBean id="obj" class="ref_Database.Refernce_Database" />
<form method="post" action="All_Mps.jsp">
<b>Select Status</b>
<p><input type="radio" name="val" value="Filling" id="Filling"> Filling</p>
<p><input type="radio" name="val" value="Stored" id="stored"> Stored</p>
Select Reference:
<select name="ref_fill" id="Fill" disabled="disabled" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
Select Reference:
<select name="ref_stored" id="stored" disabled="disabled" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>
<br><br>
<b>Select Date to be compared</b><br>
<p>
在HTML中这样使用,
<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
<br />
<select id="mOptions" disabled="true">
<option>Select</option>
<option value="1">Shirt</option>
<option value="2">Pant</option>
<option value="3">dhoti</option>
</select>
<select id="fOptions" disabled="true">
<option>Select</option>
<option value="4">Saree</option>
<option value="5">Bangle</option>
<option value="6">handbag</option>
</select>
在脚本中我使用了 jQuery 库,
$(document).ready(function(){
$('input[name="gender"]').click(function() {
if($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if(radioValue == "m"){
$( "#mOptions" ).prop( "disabled", false );
$( "#fOptions" ).prop( "disabled", true );
} else {
$( "#mOptions" ).prop( "disabled", true );
$( "#fOptions" ).prop( "disabled", false );
}
}
});
});
请使用此 link
找到有效的 FIDDLE