使用 jquery 禁用文本框？答案

【问题标题】：disable textbox using jquery?使用 jquery 禁用文本框？
【发布时间】：2009-10-30 09:53:55
【问题描述】：

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

【问题讨论】：

您应该删除相同的 ID。 names 可以相同，但ids 必须是唯一的。

标签： jquery

【解决方案1】：

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

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

  });

【讨论】：

@vinothkumar：马特的回答更有效率。以我的作为一个不太好的例子。
这里我们可以定义 i 值。
@vinothkumar i 通过 JQuery 的 each() 从 function(i) 传入。 i==2 用于访问第三个单选按钮。参考我的代码。
对旧版浏览器有什么怜悯之心吗？
<span id="radiobutt"> -- RadioHead 的表弟？

【解决方案2】：

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

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

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

请查看此链接以获取完整说明。 Disable/enable an input with jQuery?

【讨论】：

根据 Jquery 官网，prop 是要走的路。 +1

【解决方案3】：

这个帖子有点旧，但信息应该更新。

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

【讨论】：

+1，但我发现您不能将 removeProp 用于 disabled 属性。 jQuery 文档说要改用prop("disabled", false);。 api.jquery.com/prop/#prop-propertyName-value
这是使用 prop() 的更好方法。我在复选框上使用 attr() 时遇到了一些问题。第一次没问题第二次没反应。所以使用 prop()。 +1 来自我

【解决方案4】：

不是真的有必要，但对 o.k.w. 的代码进行了小幅改进，可以使函数调用更快（因为您将条件移到函数调用之外）。

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

@ScottE: each() 被使用是因为我们想要获得第三个单选按钮。我们也可以使用$("input[type=radio]:eq(2)")。您的方法按值识别单选按钮，这当然也是有效的。 :)
如果用户首先选择复选框并在文本框中输入一些文本，然后如果他选择单选按钮，则必须取消选中选中的复选框并且文本框将被清除？我该怎么做.. .我问这些问题是因为我是新手...提前谢谢..
@vinothkumar - 考虑到这个要求，我可能不会像上面那样设置 js，但在这种情况下，只需检查元素是否被禁用并调用 $("#usertxtbox")。 val("") 在我会拥有

【解决方案6】：

我会做的略有不同

 <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

【讨论】：

【解决方案7】：

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

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 完成这项工作，但这很容易恕我直言。

【解决方案8】：

很抱歉在聚会上这么晚了，但我认为这里有一些改进的余地。不是关于“禁用文本框”，而是关于 radionbox 选择和代码简化，使其更具未来性，以供以后更改。

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

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

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

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

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

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

【讨论】：

【解决方案9】：

MVC 4 @Html.CheckBoxFor 通常人们希望对 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);

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

【讨论】：