поле ввода отключено, пока не установлен переключатель (HTML)

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

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

Вот мой код:

        <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>

javascript forms html html-select html-input
person Alex C.    schedule 19.09.2012    source источник
comment
Вы не сможете сделать это только в чистом HTML. Вам нужно будет интегрировать javascript.   -  person andy    schedule 19.09.2012

Ответы (2)


arrow_upward
15
arrow_downward

Вам нужно будет использовать javascript. Самый короткий способ в коде, который вы указали, - это прикрепить атрибут ID как к полю выбора, так и к полю ввода, а также отключить/включить их с помощью события «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>

person Wilq    schedule 19.09.2012
comment
что делать, если мне нужно установить флажок в начале и отключить id="charstype" до выполнения события onclick - person ; 01.03.2016
comment
@Mr.Shrestha использует атрибут HTML disabled="disabled", чтобы отключить любой ввод по умолчанию без выполнения каких-либо событий. Чтобы установить флажок в начале, вы также можете использовать HTML-атрибут checked="checked" - person Wilq; 01.03.2016

arrow_upward
2
arrow_downward

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

<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>​​​​​​​​​​​

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

person Nelson    schedule 19.09.2012
comment
Скрипка не работает при переключении между переключателями - person orjan; 27.02.2013