Question

我有一个关于在选中其中一个收音机框时禁用一个输入框的问题，并且在取消选中收音机框后再次启用它们。用户无法选择两个radiobox。选中一个时，另一个输入被禁用

这是我的标记，

<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>

不知怎的，它不像我预期的那样工作。请帮我解决这个问题，

感谢

Answer 1

如果您使用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>

Answer 2

问题在于选择器：

        $('#percentInputBox :input').attr('disabled', true);

一定是

        $('#percentInputBox:input').attr('disabled', true);

因为ID为#percentInputBox的元素属于输入类型。

相反，它可以只是：

        $('#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

Answer 3

试试这个

<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>

Answer 4

这绝对适合你......

<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>

我在此处所做的是我已将onclick函数设为同名updatetext()

选中radiobox时禁用输入框

4 个答案: