[英]Enable/disable a form element after checking radio button checked states
我對單選按鈕有十個左右的問題。 在用戶可以前進到另一個級別之前,都需要將它們都設置為true。 當且僅當這十個問題均已回答為真時,我才希望啟用表單上的元素之一以進行進一步的編輯。 我可以在服務器端執行此操作,但是不知道如何在JavaScript中執行此操作。 有什么幫助嗎? 非常感激。 謝謝。
<div>
<label> First Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>
<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>
<div>
<label> Second Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][researched]" type="radio" value="true" />Yes</label>
<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][researched]" type="radio" value="false" />No</label>
</div>
<div>
<label> Third Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>
<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>
這段代碼擴展了更多的問題。
通過這樣做,我已經能夠選擇收音機:
var first_ten = $(':radio[name="project[person_attributes][is_complete_and_works]"][value=true], :radio[name="project[person_attributes][researched]"][value=true], etc…);
現在,我不知道如何遍歷每個對象,當我單擊每個單選按鈕時(是或否),我想查看要啟用的元素的結果。 任何想法表示贊賞。
像下面這樣的事情會做的:
<script type="text/javascript">
function proceed(form) {
var el, els = form.getElementsByTagName('input');
var i = els.length;
while (i--) {
el = els[i];
if (el.type == 'checkbox' && !el.checked) {
form.proceedButton.disabled = true;
return;
}
}
form.proceedButton.disabled = false;
}
</script>
<form onclick="proceed(this);">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="submit" name="proceedButton" disabled>
</form>
請注意,這被認為是錯誤的設計,因為javascript不可用或未啟用,用戶永遠無法單擊該按鈕。 最好以有用的狀態交付表單,並在提交時使用腳本驗證所有按鈕均已選中,如果沒有,則取消提交。
然后,在服務器上,您還可以檢查狀態,並且僅在當前頁面通過驗證時才顯示下一頁。 如果不是,請使用戶返回首頁。
這樣,無論您還是用戶都不關心腳本是否起作用,頁面仍然可以運行。 當然,如果腳本能夠正常工作,可能會是更好的體驗,但是至少選擇的不是二進制文件,它還為您提供了一個簡單的后備支持,以最少的努力即可支持多種瀏覽器。
因此,更好的解決方案是:
<form onsubmit="reurn validate(this);" ...>
...
</form>
然后在函數中:
function validate(form) {
// if validateion fails, show an appropriate message and return false,
// if it passes, return undefined or true.
}
始終要在服務器上進行驗證,因為您真的不知道客戶端發生了什么。
表單控件不需要名稱和ID,只需使用名稱即可。 在單選按鈕集中,只能檢查一個控件,而不能檢查所有控件。
在我看來,您要嘗試做的是查看每組中是否至少檢查了一個單選按鈕。 您可以根據上面的代碼進行操作,並在遇到時選擇每個集合,例如
function validateForm(form) {
// Get all the form controls
var control, controls = form.elements;
var radios = {};
var t, ts;
// Iterate over them
for (var i=0, iLen=controls.length; i<iLen; i++) {
control = controls[i];
// If encounter a radio button in a set that hasn't been visited
if (control.type == 'radio' && !radios.hasOwnProperty(control.name)) {
ts = form[control.name];
radios[control.name] = false;
// Check the set to see if one is checked
for (var j=0, jLen=ts.length; j<jLen; j++) {
if (ts[j].checked) {
radios[control.name] = true;
}
}
}
}
// Return false if any set doesn't have a checked radio
for (var p in radios) {
if (radios.hasOwnProperty(p)) {
if (!radios[p]) {
alert('missing one');
return false;
}
}
}
}
</script>
<form onsubmit="return validateForm(this);">
<input type="radio" name="r0">
<input type="radio" name="r0">
<br>
<input type="radio" name="r1">
<input type="radio" name="r1">
<br>
<input type="reset"><input type="submit">
</form>
請注意,您的表單應包含一個重置按鈕,尤其是在使用單選按鈕時。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.