[英]Enable and disable text field if either checkbox is checked
我有一個表單,其中包含2個復選框和2個禁用的輸入文本字段。
如果僅選中第一個復選框,則應啟用以下輸入文本字段:
如果僅選中第二個復選框,則應啟用以下輸入文本字段:
如果同時選中了兩個復選框,則應啟用所有輸入文本字段。 我遇到的問題是,如果選中了兩個復選框,則取消選中一個復選框,將禁用2個電子郵件文本字段。
這是我所擁有的一個小提琴。 我可以使用jQuery。 http://jsfiddle.net/Ujxkq/
這是我的HTML:
<form id="myForm">
<h3>Section 1</h3>
Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection1(this.checked, 'fullName');" />
<p><input type="text" id="emailAddr" name="myEmailAddr" placeholder="Email" disabled /></p>
<p><input type="text" id="emailConfirm" name="myEmailConfirm" placeholder="Confirm Email" disabled /></p>
<p><input type="text" id="fullName" name="myFullName" placeholder="Full Name" disabled /></p>
<h3>Section 2</h3>
Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection2(this.checked, 'color', 'size', 'model');" />
<p><input type="text" id="color" name="myColor" placeholder="Color" disabled /></p>
<p><input type="text" id="size" name="mySize" placeholder="Size" disabled /></p>
<p><input type="text" id="model" name="myModel" placeholder="Model" disabled /></p>
</form>
這是我的Javascript:
function enableDisableEmail(isEnabled, email, confirm) {
document.getElementById(email).disabled = !isEnabled;
document.getElementById(confirm).disabled = !isEnabled;
}
function enableDisableSection1(isEnabled, fullName) {
document.getElementById(fullName).disabled = !isEnabled;
}
function enableDisableSection2(isEnabled, color, size, model) {
document.getElementById(color).disabled = !isEnabled;
document.getElementById(size).disabled = !isEnabled;
document.getElementById(model).disabled = !isEnabled;
}
你用jQuery標記了這個問題,但到目前為止你還沒有使用它。
這是一個使用jQuery的版本:
jQuery(function($) {
$('#checkboxOne, #checkboxTwo').click(function() {
var cb1 = $('#checkboxOne').is(':checked');
var cb2 = $('#checkboxTwo').is(':checked');
$('#emailAddr, #emailConfirm').prop('disabled', !(cb1 || cb2));
$('#fullName').prop('disabled', !cb1);
$('#color, #size, #model').prop('disabled', !cb2);
});
});
如果您使用此版本,則可以刪除復選框上的所有onclick屬性。
這個版本的更新小提琴在這里: http : //jsfiddle.net/tB7Yz/
而不是每次只來回切換,檢查兩個復選框的狀態,並決定是否應該基於此啟用或禁用每個字段。
您可以將其簡化為單個函數,可以通過任一復選框調用它:
function enableDisableAll() {
var cb1 = document.getElementById('checkboxOne').checked;
var cb2 = document.getElementById('checkboxTwo').checked;
document.getElementById('emailAddr').disabled = !(cb1 || cb2);
document.getElementById('emailConfirm').disabled = !(cb1 || cb2);
document.getElementById('fullName').disabled = !cb1;
document.getElementById('color').disabled = !cb2;
document.getElementById('size').disabled = !cb2;
document.getElementById('model').disabled = !cb2;
}
更新的小提琴在這里: http : //jsfiddle.net/p8gqZ/1/
我把你的代碼改成了一個用過的Jquery
$(document).ready(function(){
var changeStatus = function(){
var fne = $("#checkboxOne").prop("checked");
$("#fullName").prop("disabled", !fne);
var csme =$("#checkboxTwo").prop("checked");
$("#color").prop("disabled", !csme);
$("#size").prop("disabled", !csme);
$("#model").prop("disabled", !csme);
var any= fne || csme;
$("#emailAddr").prop("disabled", !any);
$("#emailConfirm").prop("disabled", !any);
};
$("#checkboxOne").on("change", changeStatus);
$("#checkboxTwo").on("change", changeStatus);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.