输入字段被禁用，直到选中单选按钮(HTML) [英] input field disabled until radio button is checked (HTML)

问题描述

我有两个字段，其中一个是文本输入字段，另一个是选择标签. 问题是我只想启用其中之一 然后用户应通过点击上方的单选按钮之一来选择启用哪一个.

I have two fields, one of them is a text input field and the other is a select tag. The thing is I want one of them to be enabled only and the user should choose which one is enabled by clicking on one of the radio buttons above.

因此，如果用户选择第一个单选按钮，则将启用输入字段 如果他选择了第二个标签，则会启用选择标签.

So if the user chooses the first radio button the input field will be enabled and if he choose the second one the select tag will be enabled.

这是我的代码:

        <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.您提供的代码中最短的方法是将一个ID属性同时附加到选择字段和输入字段，并通过"onclick"事件禁用/启用它们.

You will need to use javascript. The shortest way in code you gave would be to attach an ID attribute both to select and input field, and disable/enable them by "onclick" event.

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

这篇关于输入字段被禁用，直到选中单选按钮(HTML)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！