使用 jquery 禁用文本框？

disable textbox using jquery?

提问by svk

I have three radio buttons with same name and different values.When I click the third radio button the checkbox and textbox going to be disabled.but when I choose other two radio buttons it must be show.I need the help in Jquery.Thanks in advance....

我有三个具有相同名称和不同值的单选按钮。当我单击第三个单选按钮时，复选框和文本框将被禁用。但是当我选择其他两个单选按钮时，它必须显示。我需要 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>

回答by o.k.w

HTML

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>

Javascript

Javascript

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

  });

回答by Matt Huggins

Not really necessary, but a small improvement to o.k.w.'s code that would make the function call faster (since you're moving the conditional outside the function call).

不是真的有必要，但对 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");
        });
    }
});

回答by mac10688

This thread is a bit old but the information should be updated.

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

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

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

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

要检索和更改 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);
    }
  });
});

回答by ScottE

I'm not sure why some of these solutions use .each() - it's not necessary.

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

Here's some working code that disables if the 3rd checkbox is clicked, otherwise is removes the disabled attribute.

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

Note: I added an id to the checkbox. Also, remember that ids must be unique in your document, so either remove the ids on the radiobuttons, or make them unique

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

回答by Ahmed Kamal

I know it is not a good habit to answer an old question but I'm putting this answer for people who would see the question afterwards.

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

The best way to change the state in JQuery now is through

现在改变 JQuery 状态的最好方法是通过

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

Please check this link for full illustration. Disable/enable an input with jQuery?

请查看此链接以获取完整说明。 使用 jQuery 禁用/启用输入？

回答by S Philp

I would've done it slightly different

我会做的略有不同

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

Notice class attribute

注意类属性

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

This way should you need to add more radio buttons you don't need to worry about changing the javascript

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

回答by Steven

Sorry for being so late at the party, but I see some room for improvement here. Not concerning "disable textbox", but to the radionbox selection and code simplification, making it a bit more future proof, for later changes.

很抱歉在聚会上迟到了，但我认为这里有一些改进的空间。与“禁用文本框”无关，而是关于 radionbox 选择和代码简化，使其更具未来证明，以供以后更改。

First of all, you shouldn't use .each() and use the index to point out a specific radio button. If you work with a dynamic set of radio buttons or if you add or remove some radio buttons afterwards, then your code will react on the wrong button!

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

Next, but that wasn't probably the case when the OP was made, I prefer to use .on('click', function(){...}) instead of click... http://api.jquery.com/on/

接下来，但在制作 OP 时可能并非如此，我更喜欢使用 .on('click', function(){...}) 而不是 click... http://api.jquery。 com/on/

Lst but not least, also the code could be made more simple and future proof by selecting the radio button based on it's name (but that appeared already in a post).

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

So I ended up with the following code.

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

HTML (based on code of o.k.w)

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

JS代码

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

回答by Rahul Sonone

MVC 4 @Html.CheckBoxFor generally people want to action on check and uncheck of mvc checkbox.

MVC 4 @Html.CheckBoxFor 通常人们希望对 mvc 复选框的选中和取消选中进行操作。

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

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

you can define id for the controls you want to change and in javascript do the folowing

您可以为要更改的控件定义 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();
             }
        });
    });

you can also change the property like

您还可以更改属性，例如

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

回答by boateng

$(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">

回答by Gufran Hasan

get radio buttons value and matches with each if it is 3 then disabled checkbox and textbox.

获取单选按钮值并与每个值匹配，如果它是 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>