使用jquery禁用文本框？

我有三个同名不同值的单选按钮。当我单击第三个单选按钮时，复选框和文本框将被禁用。但当我选择其他两个单选按钮时，它必须显示。我需要Jquery中的帮助。提前感谢

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

---

我猜您可能希望将“单击”事件绑定到多个单选按钮，读取单击的单选按钮的值，并根据该值禁用/启用复选框和/或文本框

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});

HTML

---

不是真的需要，但是对o.k.w.的代码进行了一点改进，这将使函数调用更快（因为您正在将条件移到函数调用之外）

---

我不确定这些解决方案中的一些为什么使用.each（）-这不是必需的

下面是一些工作代码，如果单击第3个复选框，则禁用该代码，否则将删除禁用的属性

注意：我在复选框中添加了一个id。另外，请记住，ID在文档中必须是唯一的，因此请删除单选按钮上的ID，或者使其唯一

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

---

我会做得稍有不同

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />   

---

这样，如果您需要添加更多单选按钮，则无需担心更改javascript。此线程有点旧，但应更新信息

要检索和更改DOM属性，如选中、选中、， 或禁用表单元素的状态，请使用.prop（）方法

---

我知道回答一个老问题不是一个好习惯，但我把这个答案给那些事后会看到这个问题的人

现在更改JQuery中状态的最佳方法是通过

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

请检查此链接以获取完整的说明。

---

很抱歉在聚会上迟到了，但我认为这里还有改进的余地。不是关于“禁用文本框”，而是对radionbox的选择和代码进行简化，使其更具前瞻性，以备日后更改

首先，不应该使用.each（）并使用索引指出特定的单选按钮。如果您使用的是一组动态单选按钮，或者如果您随后添加或删除了一些单选按钮，那么您的代码将对错误的按钮作出反应

下一步，但在执行OP时可能不是这样，我更喜欢使用.on（'click'，function（）{…}）而不是click。。。

Lst但并非最不重要的是，通过选择基于其名称的单选按钮（但该单选按钮已出现在帖子中），代码也可以变得更简单，并具有未来证明

因此，我最终得到了以下代码

HTML（基于o.k.w的代码）

---

MVC 4@Html.CheckBoxFor通常情况下，人们希望对选中和取消选中MVC复选框进行操作

$（文档）.ready（函数（）{
$（“#txt1”）.attr（“onfocus”、“blur（）”）；
});
获取单选按钮值并与每个值匹配（如果为3），然后禁用
复选框和文本框


$（“#radiobutt input[type=radio]”。单击（函数（）{
$（此）.each（函数（索引）{
//log（$（this.val（））；
if（$（this）.val（）==3）{//获取单选按钮值并匹配if 3，然后禁用。
$（“#文本框_字段”）.attr（“禁用”、“禁用”）；
$（“#复选框_字段”）.attr（“禁用”、“禁用”）；
}
否则{
$（“#文本框_字段”）.removeAttr（“禁用”）；
$（“#复选框_字段”）.removeAttr（“禁用”）；
}
});
});

@vinothkumar:Matt的答案更有效。以我的为例，我们可以在这里定义i值。@vinothkumar
i
是通过JQuery的
each（）
从
函数（i）
传入的
i==2
用于访问第三个单选按钮。请参阅我的代码。对较旧的浏览器有什么好处吗？
--RadioHead的近亲？我还没有用提供的HTML完成这项工作，但这相当容易。您应该删除相同的ID
name
s可以相同，但是
id
s必须是唯一的。@ScottE:
each（）
之所以被使用，是因为我们想获得第三个单选按钮。我们也可以使用
$（“input[type=radio]：eq（2）”）
。您的方法通过值标识单选按钮，这当然也是有效的。：）如果用户首先选择复选框并在文本框中输入一些文本，然后选择单选按钮，则必须取消选中复选框，文本框将被清除？我如何才能做到这一点…我问这些问题，因为我是anewbie…提前感谢..@vinothkumar-考虑到这一要求，我可能不会设置js如上所述，但在本例中，只需检查元素是否已禁用，并在I上调用$（“#usertxtbox”）.val（“”），I将具有+1，但我发现您无法对禁用的属性使用
removeProp
。jQuery文档说使用
prop（“disabled”，false）取而代之。使用prop（）是一种更好的方法。我在复选框上使用attr（）时遇到了一些问题。第一次没问题，第二次没反应。所以使用prop（）+1从mePer Jquery官方网站上，道具是必经之路+1.
$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />   

 $(document).ready(function() {      
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);           
    });
});

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true); 
        $("#checkbox1").prop("disabled", true); 
    }
    else {
        $("#textbox1").prop("disabled", false); 
        $("#checkbox1").prop("disabled", false);
    }
  });
});

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

<span id="radiobutt">
    <input type="radio" name="rad1" value="1" />
    <input type="radio" name="rad1" value="2" />
    <input type="radio" name="rad1" value="3" />
</span>
<div>
    <input type="text" id="textbox1" />
    <input type="checkbox" id="checkbox1" />
</div>

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});