jquery 基于单选按钮启用/禁用文本框

Posted 2023-03-05

【中文标题】jquery 基于单选按钮启用/禁用文本框

【英文标题】：jquery enable/disable text box based on radiobutton

【发布时间】：2010-12-04 15:25:18

【问题描述】：

在我的页面 (jsp) 中，我有一个单选按钮组和一个文本框（最初是禁用的）。

当用户点击单选按钮时，文本框应该被启用 当用户点击其他单选按钮时，文本框应该再次被禁用。

我可以使用下面的代码启用最初禁用的复选框。

$("#DevGroup_OTHER").click(function()          
    $("#otherDevText").attr("disabled","");
)

我的问题：

但是如何再次禁用文本框？ 有没有更简单的使用 jQuery 的解决方案？

问候

【参考方案1】：

始终禁用它（对于每个单选按钮），如果单选按钮是启用文本框的单选按钮，则重新启用它。除非用户使用的是 1980 年制造的机器，否则它会如此之快，没有人会知道。

$('radio').click(function()  
    $("#otherDevText").prop("disabled",true);
    if($(this).attr('id') == 'enable_textbox') 
        $("#otherDevText").prop("disabled",false);
    
);

或者，如果有多个单选按钮可以启用文本框：

$('input:radio').click(function()  
  $("#otherDevText").prop("disabled",true);
  if($(this).hasClass('enable_tb')) 
      $("#otherDevText").prop("disabled",false);
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="DevGroup_OTHER">
  <input type="radio" id="d1" name="r1" value="d1">dev1 <br /> 
  <input type="radio" id="d2" name="r1" value="d2">dev2 <br/> 
  <input type="radio" id="d3" name="r1" value="d3" class="enable_tb"> enable
</fieldset>
<br />
<input id="otherDevText" name="tb1" disabled="disabled"
       value="some Textbox value" type="text">

有意义吗？

【讨论】：

谢谢你，法里斯，那就更好了。对我来说，另一个问题是我使用的是弹簧，所以我使用了 而不是 任何关于选择所有单选按钮的想法。再次感谢。

是的，我找到了一个，按标签名称选择。另外，当我们在您的代码中说 $(this) 时会出现什么？是第一个选择器 ($('radio')) 还是第二个选择器 ($("#otherDevText")) 我得到了一些命令对象名称，因为我使用 spring MVC！

我不熟悉Spring MVC，但我很确定通过jquery有机会与代码交互，元素将为<input type="radiobutton"> .第二个问题的答案：$(this) 将引用点击的$('radio') 元素。

谢谢你，是的，它指的是单击的单选按钮。但在我的情况下，“id”属性返回一些有线结果可能是因为 spring MVC 标签。无论如何，感谢您的快速回复！

@KyleFarris 我的编辑可以被认为是关于有效编辑的边缘案例；如果它歪曲了你的答案，那么我很抱歉，请随时删除它。

【参考方案2】：

$("#some_other_radiobutton").click(function()
  $("#otherDevText").attr("disabled","disabled");
);

【讨论】：

是的，但现在我必须为所有其他单选按钮编写此块

为什么不在所有其他单选按钮“禁用文本”上放置一个类并将点击处理程序连接到该类？只是一个想法，我是一个jQuery新手。

拉里是对的。如果您需要将单选按钮组合在一起，请使用类或将它们放在一个公共容器中（例如 div）。