javascript - 如何在单击单选按钮之一时启用文本框

Question

我使用 bootstrap 3 在 html 页面中有 4 个单选按钮和一个文本框，我想默认禁用文本框并启用当单选按钮 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);
        }
    });