选中单选框时禁用输入框

Disabling input box when radiobox is checked

本文关键字：输入 单选框      更新时间：2023-09-26

我有一个问题，关于在选中其中一个单选框时禁用一个输入框，并在取消选中单选框后再次启用它们。用户不能同时选择这两个单选框。当一个被选中时，另一个输入被禁用

这是我的标记，

<div class="radio i-checks">
                                        <label> 
                                            <input type="radio" value="option4" name="a" id="nominalRadioBox" onchange="toggleNominalStatus();"> <i></i> Nominal &nbsp;
                                        </label>
                                        <span>
                                            <input type="text" id="nominalInputBox"> &nbsp;<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 &nbsp;
                                        </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 &nbsp;
    </label>
    <span>
        <input type="text" id="nominalInputBox"> &nbsp;<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 &nbsp;
    </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函数

相关文章：