campo di input disabilitato fino a quando il pulsante di opzione è selezionato (HTML)

Question

Ho due campi, uno di loro è un campo di inserimento del testo e l'altro è un tag di selezione. Il fatto è che voglio che uno di essi sia abilitato solo su e che l'utente debba scegliere quale è abilitato facendo clic su uno dei pulsanti di opzione in alto.

Quindi, se l'utente sceglie il primo pulsante di opzione, il campo di immissione verrà abilitato e se sceglierà il secondo il tag di selezione verrà abilitato.

Ecco il mio codice:

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

Answer 1

Sarà necessario usare javascript. Il modo più breve nel codice che hai dato sarebbe quello di collegare un attributo ID sia per selezionare che per inserire il campo, e disabilitarli/abilitarli dall'evento "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>

Answer 2

ho modificato il codice per fare quello che vuoi, qui è:

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

si può vedere funzionando here