pole wejściowe wyłączone, dopóki nie zostanie zaznaczone pole wyboru (HTML)

Question

Mam dwa pola, jeden z nich to pole wprowadzania tekstu, a drugi to znacznik wyboru. Chodzi o to, że chcę, aby jeden z nich był włączony tylko , a użytkownik powinien wybrać, który z nich jest włączony, klikając jeden z przycisków radiowych powyżej.

Tak więc, jeśli użytkownik wybierze pierwszy przycisk radiowy, pole wejściowe zostanie włączone , a jeśli wybierze drugie, zostanie włączony znacznik wyboru.

Oto mój kod:

 <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

Trzeba będzie użyć JavaScript. Najkrótszym sposobem w kodzie, który podałeś, byłoby dołączenie atrybutu ID zarówno do wybierania i wprowadzania pola, jak i wyłączania/włączania ich przez zdarzenie "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

I zmodyfikowany kod robić, co chcesz, to jest tutaj:

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

widać to działa here