Question

我在html页面中有4 radio buttons和textbox使用bootstrap 3，我希望默认情况下禁用textbox并在单选按钮EnterRange时启用它已启用。有任何建议吗？

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#txtbox").attr("disabled", false);
        }
    });
</script>

html代码：

<div class="customradio">
    <input class="radioBtn" type="radio" id="5" name="optradio" value="5" checked="checked">
    <label for="5">5 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="10" name="optradio" value="10">
    <label for="10">10 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="15" name="optradio" value="15">
    <label for="15">15 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange">
    <label for="EnterRange">Enter Range</label>
</div>
<div>
   <input type="text" id="dist" name="txtbox" disabled="disabled"> <label>Km</label>
</div>

Answer 1

这里只有一个错误

if ($("input[name=optradio]:checked").val() == "EnterRange") {
 $("#dist").attr("disabled", false);  //selector is wrong.
}

您刚刚将name设为selector，实际上您的代码非常完美，您需要将此selector更改为$("#txtbox")至$("#dist")

$(".radioBtn").change(function() {
    $("#dist").attr("disabled", true);
    alert($("input[name=optradio]:checked").val())
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#dist").attr("disabled", false);
        }
    });

Answer 2

你可以简单地通过jQuery来做到这一点。请尝试以下代码段：

HTML：

<div class="customradio">
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange">
    <label for="EnterRange">Enter Range</label>
</div>
<div>
   <input type="text" id="dist" name="txtbox"> <label>Km</label>
</div>

对于jQuery 1.6 +

，您可以使用.prop()函数：

$(document).ready(function () { $("#dist").prop('disabled', true); $("#EnterRange").click(function () { $("#dist").prop('disabled', false); }); });

jQuery 1.5及以下，.attr和.remoceAttr做同样的事情：

$(document).ready(function () { $("#dist").attr("disabled","disabled"); $("#EnterRange").click(function () { $("#dist").removeAttr("disabled"); }); });

Answer 3

您的代码可以正常使用，只需查看您正在使用的ID

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#txtbox").attr("disabled", false);
        }
    });
</script>

使用

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#dist").attr("disabled", false);
        }
    });
</script>

如何在单击其中一个单选按钮时启用文本框

3 个答案: