Textinput字段禁用单选按钮

Question

我相信有很多方法可以做到这一点，但我想找到最简单的方法，最好是基于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>

Answer 1

使用jQuery，您可以这样做(当用户单击文本字段时，禁用类radio的单选按钮)：

$("#location").click(function(){
    $(".radio").prop("disabled", true);
});

现在，如果用户单击外部(或以另一种方式离开文本字段)文本字段，则需要启用单选按钮，则只需将上面代码中的click更改为blur，如下所示：

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

Answer 2

在javascript中，以下内容将起作用：

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

因为您的http://en.wikipedia.org/wiki/Radio_button在一个类中，其中有四个。

若要重新启用它们，请将disabled设置为false：

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

然而，CSS并不是这样的电缆，因为它只是一个样式表语言。