禁用使用jQuery的文本框？
我有三个单选button具有相同的名称和不同的值。当我单击第三个单选buttoncheckbox和文本框将被禁用。但是，当我select其他两个单选button，它必须显示。我需要在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>
使用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"); } }); });
没有必要，但对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"); }); } });
这个线程有点老，但信息应该更新。
要检索和更改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); } }); });
我不知道为什么有些解决scheme使用.each（） – 这是没有必要的。
这是一些工作代码，如果第三个checkbox被点击，则禁用，否则删除禁用的属性。
注意：我添加了一个id到checkbox。 另外，请记住，文档中的ID必须是唯一的，因此要么删除单选button上的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？
我会做得稍微有点不同
<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); }); });
这种方式，你需要添加更多的单选button，你不需要担心改变的JavaScript
我猜你可能想绑定一个“单击”事件到一些单选button，读取单击单选button的值，并根据值，禁用/启用checkbox和或文本框。
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 } }); });
对不起，在聚会太晚了，但我看到这里有一些改进的余地。 不涉及“禁用文本框”，而是关于无线电框select和代码简化，使其更具前瞻性，以供稍后更改。
首先，你不应该使用.each（），并使用索引来指出一个特定的单选button。 如果您使用一组dynamicbutton，或者您之后添加或删除了一些单选button，那么您的代码将在错误的button上作出反应！
接下来，但这不是OP时，情况下，我更喜欢使用.on（'click'，function（）{…}），而不是点击… http：//api.jquery。 COM /上/
最重要的是，也可以通过select基于名称的单选button（但是已经出现在文章中）来使代码更加简单和有前途的证据。
所以我结束了以下代码。
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.CheckBoxFor一般人们想检查和取消选中mvccheckbox。
<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">
