我有一个问题,关于在选中其中一个单选框时禁用一个输入框,并在取消选中单选框后再次启用它们。用户不能同时选择这两个单选框。当一个被选中时,另一个输入被禁用
这是我的标记,
<div class="radio i-checks">
<label>
<input type="radio" value="option4" name="a" id="nominalRadioBox" onchange="toggleNominalStatus();"> <i></i> Nominal
</label>
<span>
<input type="text" id="nominalInputBox"> <span id="currency_show"></span>
</span>
</div>
<div class="radio i-checks">
<label>
<input type="radio" value="option4" name="a" id="percentRadioBox" onchange="togglePercentStatus();"> <i></i> Percent, Specify
</label>
<span>
<input type="text" id="percentInputBox"> %
</span>
</div>
这是javascript,
<script>
function toggleNominalStatus() {
if ($('#nominalRadioBox').is(':checked')) {
$('#percentInputBox :input').attr('disabled', true);
}
}
function togglePercentStatus() {
if ($('#percentRadioBox').is(':checked')) {
$('#nominalInputBox :input').attr('disabled', true);
}
}
</script>
不知怎么的,它并没有像我预期的那样起作用。,请帮我解决这个问题
感谢
问题出在选择器上:
$('#percentInputBox :input').attr('disabled', true);
必须是
$('#percentInputBox:input').attr('disabled', true);
因为ID为CCD_ 1的元素是输入类型的。
相反,它可以只是:
$('#percentInputBox').attr('disabled', true);
请记住,ID
总是独一无二的,而且非常具体。所以不需要包含额外的伪选择器或类。它只会降低选择器的性能。所以只要身份证就足够了。
所以你的完整代码是:
function toggleNominalStatus() {
if ($('#nominalRadioBox').is(':checked')) {
$('#percentInputBox').attr('disabled', true);
$('#nominalInputBox').attr('disabled', false);
}
}
function togglePercentStatus() {
if ($('#percentRadioBox').is(':checked')) {
$('#nominalInputBox').attr('disabled', true);
$('#percentInputBox').attr('disabled', false);
}
}
要取消选择单选按钮:
这是不可能的。在这种情况下,您必须复选框。
function toggleNominalStatus() {
if ($('#nominalRadioBox').is(':checked')) {
$('#percentInputBox').attr('disabled', true);
$('#nominalInputBox').attr('disabled', false);
$('#percentRadioBox').attr('disabled', true);
} else {
$('#percentInputBox').attr('disabled', false);
$('#nominalInputBox').attr('disabled', false);
$('#percentRadioBox').attr('disabled', false);
}
}
function togglePercentStatus() {
if ($('#percentRadioBox').is(':checked')) {
$('#nominalInputBox').attr('disabled', true);
$('#nominalRadioBox').attr('disabled', true);
} else {
$('#percentInputBox').attr('disabled', false);
$('#nominalInputBox').attr('disabled', false);
$('#nominalRadioBox').attr('disabled', false);
}
}
DEMO
问题出在attr
上。如果使用attr
,则应使用attr('disabled', 'disabled')
;如果要使用('disabled', true)
,则使用prop
属性。另外,您必须启用其他输入框,以便用户至少可以在一个框中输入值。
<script>
function toggleNominalStatus() {
if ($('#nominalRadioBox').attr("checked")) {
$('#nominalInputBox').removeAttr('disabled');
$('#percentInputBox').attr('disabled', 'disabled');
}
}
function togglePercentStatus() {
if ($('#percentRadioBox').attr("checked")) {
$('#percentInputBox').removeAttr('disabled');
$('#nominalInputBox').attr('disabled', 'disabled');
}
}
</script>
尝试这个
<script>
function toggleNominalStatus() {
if ($('#nominalRadioBox:checked').length) {
$('#nominalInputBox').attr('disabled', false);
$('#percentInputBox').attr('disabled', true);
$('#percentInputBox').val('');
}
}
function togglePercentStatus() {
if ($('#percentRadioBox:checked').length) {
$('#percentInputBox').attr('disabled', false);
$('#nominalInputBox').attr('disabled', true);
$('#nominalInputBox').val('');
}
}
</script>
这绝对适用于您。。
<div class="radio i-checks">
<label>
<input type="radio" value="option4" name="a" id="nominalRadioBox" onclick="updatetext();"> <i></i> Nominal
</label>
<span>
<input type="text" id="nominalInputBox"> <span id="currency_show"></span>
</span>
</div>
<div class="radio i-checks">
<label>
<input type="radio" value="option4" name="a" id="percentRadioBox" onclick="updatetext();"> <i></i> Percent, Specify
</label>
<span>
<input type="text" id="percentInputBox"> %
</span>
</div>
<script>
function updatetext() {
if(document.getElementById("nominalRadioBox").checked == true) {
document.getElementById("percentInputBox").disabled = true;
document.getElementById("nominalInputBox").disabled = false;
}
if(document.getElementById("percentRadioBox").checked == true) {
document.getElementById("nominalInputBox").disabled = true;
document.getElementById("percentInputBox").disabled = false;
}
}
</script>
我在这里所做的是,我放置了具有相同名称updatetext()
的onclick
函数