Поле ввода отключено до тех пор, пока не будет отмечен переключатель (HTML)

У меня есть два поля, одно из которых - текстовое поле ввода, а другое - тег select. Дело в том, что я хочу, чтобы один из них был включен только и пользователь должен выбрать, какой из них включен, нажав на одну из переключателей выше.

Итак, если пользователь выбирает первый переключатель, поле ввода будет включено и если он выберет вторую, тег select будет включен.

Здесь мой код:

        <input type="radio" name="type" value="customurl">wanna custom url?
        <input type="text" name="custom" placeholder="should be 5 charecters at least" >
        <br><br>
        <input type="radio" name="type" value="customurl">random?
        <select name="charstype">
            <option>Letters</option>
            <option>Number</option>
        </select>

Ответы

Ответ 1

Вам нужно будет использовать javascript. Самый короткий путь в коде, который вы указали, - это прикрепить атрибут идентификатора как для выбора, так и для ввода поля и отключить/включить их с помощью события "onclick".

<input onclick="document.getElementById('custom').disabled = false; document.getElementById('charstype').disabled = true;" type="radio" name="type" checked="checked">wanna custom url?
<input type="text" name="custom" id="custom" placeholder="should be 5 charecters at least" >
<br><br>
<input onclick="document.getElementById('custom').disabled = true; document.getElementById('charstype').disabled = false;" type="radio" name="type" value="customurl">random?
<select name="charstype" id="charstype" disabled="disabled">
       <option>Letters</option>
       <option>Number</option>
</select>

Ответ 2

Я изменил ваш код, чтобы сделать то, что вы хотите, вот он:

<input type="radio" name="type" value="customurl" 
onclick="document.getElementById('text').removeAttribute('disabled')">wanna custom url?
<input type="text" id="text" name="custom" 
placeholder="should be 5 charecters at least" disabled>
<br><br>
<input type="radio" name="type" value="customurl" 
onclick="document.getElementById('sel').removeAttribute('disabled')">random?
<select id="sel" name="charstype" disabled>
    <option>Letters</option>
    <option>Number</option>
</select>​​​​​​​​​​​

вы можете увидеть, как он работает здесь