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

的HTML

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

Java脚本

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

  });

并不是真的有必要，但是对okw的代码进行了少量改进，可以使函数调用更快（因为您将条件转移到了函数调用之外）。

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

该线程有点旧，但是应该更新信息。

http://api.jquery.com/attr/

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

$("#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);
    }
  });
});

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

这是一些工作代码，如果单击第三个复选框，它们将被禁用，否则将删除被禁用的属性。

注意：我在复选框中添加了一个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);
});

我知道回答一个老问题不是一个好习惯，但是我将这个答案提供给以后会看到该问题的人。

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

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

请检查此链接以获取完整插图。 禁用/启用jQuery输入？

我会做一点不同

 <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);           
    });
});

通过这种方式，您需要添加更多的单选按钮，而无需担心更改javascript

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

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
        }
    });
});

很抱歉在聚会上这么晚，但是我在这里看到了一些改进的空间。不涉及“禁用文本框”，而是有关radionbox的选择和代码的简化，这使其在以后的更改中更具前瞻性。

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

接下来，但是制作OP时可能不是这种情况，我更喜欢使用.on（'click'，function（）{...}）而不是单击... http：//api.jquery。 com / on /

首先但并非最不重要的一点是，通过基于其名称选择单选按钮，该代码也可以变得更加简单和面向未来（但已出现在帖子中）。

所以我最终得到了以下代码。

HTML（基于Okw的代码）

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

JS代码

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

MVC 4 @ Html.CheckBox对于一般人来说，想要对mvc复选框的选中和取消选中进行操作。

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

您可以为要更改的控件定义ID，并在javascript中进行以下操作

<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()");
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

获得单选按钮的值并与每个匹配，如果是3则禁用checkbox and textbox。

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>