Javascript 文本输入字段禁用单选按钮

我相信有很多方法可以做到这一点，但我想找到最简单的方法，最好是基于CSS的

我有一个简单的表单，有四个单选按钮，后跟一个文本字段。如果用户单击文本字段，我需要禁用单选按钮。这是我的基本代码，当然，我还在学习表单，所以可能还有其他错误：

<div class="left-column">
<input type="radio" class="radio" name="location" value="address-1" id="address-1" checked="checked" />
<label for="address-1">First location</label>
<input type="radio" class="radio" name="location" value="address-2" id="address-2" />
<label for="address-2">Second location</label>
</div>

<div class="right-column">
<input type="radio" class="radio" name="location" value="address-3" id="address-3" />
<label for="address-3">Third location</label>
<input type="radio" class="radio" name="location" value="address-4" id="address-4" />
<label for="address-4">Fourth location</label>
</div>

<div>
<textarea id="location" type="text" tabindex="1" name="location" cols="22" rows="1">    </textarea>
</div>

第一位置
第二位置
第三地点
第四个位置

使用jQuery，您可以执行如下操作（当用户单击文本字段时，将禁用class

radio

的单选按钮）：

现在，如果用户单击文本字段外部（或以另一种方式离开文本字段）时需要启用单选按钮，您可以将上面代码中的

单击

更改为

模糊

，如下所示：

$("#location").blur(function(){
    $(".radio").prop("disabled", false);
});

---

在javascript中，以下操作将起作用：

window.onload = function()
{
   document.getElementById('location').addEventListener('click', function()
   {
      for(var i = 0; i < 4; i ++)
      {
      document.getElementsByClassName('radio')[i].disabled = true;
      }
   });
}

---

不过，CSS并不是其中的一部分，因为它只是一个。

您需要使用JS而不是CSS。您不能单独使用CSS禁用表单元素。我已经尝试过这些，并且我注意到，当脚本就位时，当用户将光标放在textinput字段中时，默认的勾选按钮不会取消勾选，如果勾选了其他按钮，也不会取消勾选。所以我不确定javascript是否真的有效。我还应该问，“模糊”版本是用来替代“点击”版本，还是你的意思是除此之外。如果你想在用户点击文本字段外时再次将单选按钮重置为默认设置（启用），我添加的

blur

版本。看看这个jsfiddle（），看看我的意思，你的脚本不起作用的原因可能是我在这个字段上运行了一个js水印脚本。也许这两个人彼此不喜欢：

code

jQuery（函数（$）{$（“#位置”）.Watermark（“其他位置”）；}；隐马尔可夫模型。。。如果您将

click（function（）{

更改为

focus（function（）），它可能会起作用{

？是的，不幸的是，这没有什么区别。现在，这工作非常好！但是，如果有人在文本字段中改变主意并想单击单选按钮，还可以做些什么来重置状态？设置disabled=false；查看编辑。将该代码放在单选按钮的单击事件中以重新启用它们：

（var i=0；i<4；i++）{document.getElementsByClassName（'radio'）[i].addEventListener（'click'，function（）{for（var i=0；i<4；i++）{document.getElementsByClassName（'radio'）。disabled=false；}}

另外，请将我的答案标记为“正确”。@Daniellisk这就是为什么没有人使用IE8，而且绝对没有低于IE8的原因。@ManofSnow在我看来，大约8.7%的互联网用户是一个值得注意的数字。为了达到重置状态，不太清楚添加的代码是添加到第一个代码中，还是全部添加到哪里。我尝试更改为true在初始代码上设置为false，但效果将丢失。

window.onload = function()
{
   document.getElementById('location').addEventListener('click', function()
   {
      for(var i = 0; i < 4; i ++)
      {
      document.getElementsByClassName('radio')[i].disabled = true;
      }
   });
}

document.getElementById('location').addEventListener('click', function()
       {
          for(var i = 0; i < 4; i ++)
          {
          document.getElementsByClassName('radio')[i].disabled = false;
          }
       });