Javascript 输入字段禁用,直到选中单选按钮(HTML)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12491297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 10:31:36  来源:igfitidea点击:

input field disabled until radio button is checked (HTML)

javascripthtmlhtml-selectformshtml-input

提问by Alex C.

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.

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

Here's my code:

这是我的代码:

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

回答by Wilq

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.

您将需要使用 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>

回答by Nelson

I modified your code to do what you want, here it is:

我修改了你的代码来做你想做的,这里是:

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

you can see it working here

你可以看到它在这里工作