Текстовое поле отключает радиокнопки

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 ложь:

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

CSS не кабель этого, хотя, потому что это только Style Sheet Language.