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

我在使用bootstrap 3的html页面中有4个

单选按钮

和一个

文本框

，我想在默认情况下禁用

文本框

，并在启用单选按钮时启用它。有什么建议吗

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

$（“.radioBtn”）。单击（函数（）{
$（“dist”）.attr（“disabled”，true）；
if（$（“输入[name=optradio]：选中”）.val（）=“EnterRange”）{
$（“#txtbox”）.attr（“禁用”，false）；
}
});

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>

5公里
10公里
15公里
输入范围
公里

您只需通过jQuery即可完成。请尝试以下代码段：

Html:

jQuery 1.5及以下版本，并执行相同的操作：

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

---

您的代码可以正常工作，只需检查您使用的ID即可

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

$（“.radioBtn”）。单击（函数（）{
$（“dist”）.attr（“disabled”，true）；
if（$（“输入[name=optradio]：选中”）.val（）=“EnterRange”）{
$（“#txtbox”）.attr（“禁用”，false）；
}
});

使用

$（“.radioBtn”）。单击（函数（）{
$（“dist”）.attr（“disabled”，true）；
if（$（“输入[name=optradio]：选中”）.val（）=“EnterRange”）{
$（“#dist”）.attr（“禁用”，false）；
}
});

这里只有一个错误

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

您刚刚将

名称

设置为

选择器

实际上，您的代码非常完美。您只需将此

选择器

更改为

$（“#txtbox”）

到

$（“#dist”）

---

我们希望您尝试自己解决问题，然后在代码遇到特定问题时发布问题。请浏览帮助中心，了解本网站的主题有哪些问题。此解决方案有什么问题吗？让我知道你为什么按下投票按钮。。。！按下向下投票按钮的不是我：）……关于您的回复，我希望它启用或禁用文本框而不是隐藏它。因此您可以使用

$（“#dist”）.attr（'disabled'，'disabled'）

而不是

$（“dist）.hide（）

，然后将

$（“#dist”）.show（）；

更改为

$（“#dist”）.removeAttr（'disabled'））

@NewdeveloperI刚刚编辑了回复：）@newdeveloperTanks很好…现在可以用了…是我的错…我把javascript放错地方了。非常感谢…现在可以用了…是我的错…我把javascript放错地方了。

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

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

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