簡體   English   中英

如何根據是否通過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頁面中,我有兩個單選按鈕,如果我選中一個單選按鈕,則應啟用一個下拉列表,如果我選擇另一個單選按鈕,則應啟用另一個下拉列表,並且應禁用第一個下拉列表。按鈕被選中,那么兩個下拉菜單都將被取消顯示。 我用這種方式嘗試過,但沒有結果

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

編輯-如果無法通過jstl完成,則如何通過javascript進行操作。

<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 );
        }
   }
});
});

請通過此鏈接找到有效的FIDDLE

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM