2015-03-25 101 views
1

在jsp頁面中我有兩個單選按鈕,如果我檢查一個單選按鈕,那麼應該啓用一個下拉列表,如果我選擇另一個單選按鈕,然後應該啓用另一個下拉列表,並且應該禁用第一個下拉列表。如果沒有選擇任何單選按鈕,則下拉列表應該被除去。如何做到這一點使用或jstl.I的標籤thsi方式嘗試過,但沒有結果如何啓用和禁用下拉列表,基於是否通過jstl在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> 

編輯 - 如何做到這一點通過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> 
+0

使用JavaScript ,因爲點擊單選按鈕是瀏覽器事件。 – 2015-03-25 04:42:06

+0

好的,但如何在JavaScript中實現它呢? – 2015-03-25 04:50:47

+0

編寫javascript函數以獲取單選按鈕的值並檢查值。如果第一個啓用第一個選擇框,反之亦然 – 2015-03-25 04:53:20

回答

1

在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此鏈接

+0

讓我檢查一下。 – 2015-03-25 05:55:11

+1

你有一個單選按鈕和下拉框相同的ID。 Id應該是唯一的,並且在你的場景中改變單選按鈕ID。 – 2015-03-25 05:59:59

相關問題