campo de entrada deshabilitado hasta que se marque el botón de opción (HTML)

Question

Tengo dos campos, uno de ellos es un campo de entrada de texto y el otro es una etiqueta de selección. La cuestión es que quiero que uno de ellos esté habilitado solo y el usuario debe elegir cuál está habilitado haciendo clic en uno de los botones de opción que aparecen arriba.

Así que si el usuario elige el primer botón de opción, el campo de entrada se habilitará y si elige el segundo, se habilitará la etiqueta de selección.

Aquí está mi código:

 <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

Usted tendrá que usar javascript. La forma más corta de introducir el código sería adjuntar un atributo de identificación para seleccionar e ingresar el campo y deshabilitarlos/habilitarlos mediante el 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

he modificado el código para hacer lo que quiera, aquí está:

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

Se puede ver trabajando here