Textinput字段禁用单选按钮(Textinput field disables radio buttons)

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

I'm sure there are many ways to do this, but I'd like to find the simplest way, preferably CSS-based.
 
I have a simple form with four radio buttons followed by a text field. I need to disable the radio buttons if the user clicks in the text field. This is my basic code, and granted, I'm still learning about forms, so there may be other errors:
 
<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>