首页 > 解决方案 > 如果选择了一个单选条件,则 HTML 表单然后强制输入

问题描述

我有一个带有两个输入的简单 HTML 表单。一个是无线电输入,另一个是数字输入。使用 Javascript 函数,如果单选选项选择为 Insurance - YES(1),则脚本必须强制在 Insurance Value ins_value 输入上输入数值。如果单选输入被选为否,则在文本输入中不输入任何输入。

我试图找到一个类似的示例,但只找到触发警报的简单示例。我正在学习 Javascript 并且已经通过教程 - 但也没有类似的例子。

<script>
    function INSURANCE() {
        var insurance = document.forms["RegForm"]["optradio"];
        var ins_value = document.forms["RegForm"]["ins_value"];

        if (insurance.value == 0) {
            "";
            return false;
        } else  {
        if (ins_value.value == "") {
            window.alert("Please insert Insurance value.");
            ins_value.focus();
            return false;
        }

        return true;
    }
</script>

我希望一旦提交表单,它应该根据无线电输入选择强制输入或不输入保险值。

标签: javascripthtml

解决方案


var radio = document.getElementById('optradio');
                var input = document.getElementById('ins_value');
                radio.addEventListener("click", function(){
                    if(radio.value == 0){
                        radio.value = 1;
                        this.checked = true;
                        input.removeAttribute('disabled')
                        input.value = radio.value;
                    }
                    else{
                        radio.value = 0;
                        input.setAttribute('disabled','disabled');
                        input.value = '';
                        this.checked = false;
                    }
                });
<input type="radio" name="optradio" id="optradio" value="0">
            <input type="number" name="ins_value" id="ins_value" value="" disabled>

像这样向您的数字输入添加disabled属性

html:

<input type="radio" name="optradio" id="optradio" value="0">
<input type="number" name="ins_value" id="ins_value" value="" disabled>

脚本:

<script type="text/javascript">
            var radio = document.getElementById('optradio');
            var input = document.getElementById('ins_value');
            radio.addEventListener("click", function(){
                if(radio.value == 0){
                    radio.value = 1;
                    this.checked = true;
                    input.removeAttribute('disabled')
                    input.value = radio.value;
                }
                else{
                    radio.value = 0;
                    input.setAttribute('disabled','disabled');
                    input.value = '';
                    this.checked = false;
                }
            });
        </script>

在您的 html 代码下方添加脚本


推荐阅读