基于单选按钮，使用jQuery启用/禁用文本框

Question

我在我的页面（JSP）上有一个单选按钮组和一个文本框（最初是禁用状态）。

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

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

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

我的问题：

• 但是我怎么才能再次禁用文本框呢？
• 是否有更简单的使用jQuery的解决方案呢？

致敬

- sangram

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

听明白了吗？

- KyleFarris

---

谢谢你Farris，这甚至更好。 我的另一个问题是我正在使用Spring，所以我使用了form:radiobutton...来替代<input type="radiobutton">。 有没有什么想法可以选择所有的单选按钮。再次感谢。 - sangram

是的，我找到了一个，可以通过标签名称进行选择器操作。 另外，在你的代码中，当我们使用 $(this) 时，它会代表什么？是第一个选择器（$('radio')）还是第二个选择器（$("#otherDevText"))？我正在使用Spring MVC，因此可能会获取一些命令对象名称！ - sangram

我不熟悉Spring MVC，但我非常确定通过jquery与代码交互的机会，元素将是<input type="radiobutton">。对于你的第二个问题的答案：$(this)将引用被点击的$('radio')元素。 - KyleFarris

谢谢，是的，它指的是单选按钮被点击。 但在我的情况下，“id”属性返回了一些奇怪的结果，可能是因为Spring MVC标记。 无论如何，感谢您的快速回复！ - sangram

@KyleFarris 我的编辑可能被视为关于有效编辑的边缘情况；如果它误传了你的答案，那么我很抱歉，请随意将其删除。 - surfmuggle

Answer 2

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

- Andy Gaskell

---

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

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

Larry是正确的。如果您需要将单选按钮分组在一起，请使用类或将它们放在一个公共容器中（例如div）。 - Andy Gaskell