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

10 Solutions collect form web for “禁用使用jQuery的文本框?”

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

这个线程有点老,但信息应该更新。

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

我不知道为什么有些解决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"> 
  • 禁用jQuery Mobile中的button
  • 如何使用jquery ..从URL获取域名?
  • jQuery ajax错误函数
  • .click和.change之间的checkbox有什么区别
  • 使用jQuery添加DOM元素的最佳方法
  • 定义一个使用JQuery追加的HTML模板
  • jQuery中未绑定到DOM元素的自定义事件?
  • jQueryresizefunction不能在页面加载
  • 用JavaScript / jQueryredirect发送POST数据?
  • 如何通过jQuery / JavaScript添加任何内容<head>?
  • 用jQueryUI拖动可拖动的对象