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

因为您的 radio buttons 属于一个类，并且有四个。

要重新启用所有这些功能，请将disabled设置为false：

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

然而，

CSS并不是有线的，因为它只是Style Sheet Language。

Textinput字段禁用单选按钮

2 个答案: