Question

我想在无线电输入字段中添加required属性，这是我的代码

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>test radio</title>
        <style>
            div.radio{
                background-color:silver;
            }
        </style>
    </head>
    <body>
        <form action='procesPost.html' method='POST'>
            <div class='radio'>
                <input type='radio' required name='test' value=1></input>
                <input type='radio' required name='test' value=2></input>
            </div>
            <input type='SUBMIT' value='submit'></input>
        </form>
    </body>
</html>

效果很好，我必须选择一个无线电提交，但是，如果我要禁用一个无线电，required约束将不起作用

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>test radio</title>
        <style>
            div.radio{
                background-color:silver;
            }
        </style>
    </head>
    <body>
        <form action='procesPost.html' method='POST'>
            <div class='radio'>
                <input type='radio' required name='test' value=1></input>
                <input type='radio' required disabled name='test' value=2></input>
            </div>
            <input type='SUBMIT' value='submit'></input>
        </form>
    </body>
</html>

现在，即使我没有选择任何收音机，我也可以提交表格。我想知道为什么会这样，我怎么能解决这个问题？

我在FierFox 32.0.3，RHEL6.2

中测试了我的代码

Answer 1

据CBroe说：

www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute：

Constraint validation: If an element is disabled, it is barred from constraint validation.

http://www.w3.org/TR/html5/forms.html#barred-from-constraint-validation：

A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.

最后，从约束验证步骤列表http://www.w3.org/TR/html5/forms.html#constraint-validation：

3.1: If field is not a candidate for constraint validation, then move on to the next element.

这意味着，当检查表单有效性时，禁用的元素将被“传递”。

它不会触发任何错误，并且对其所属表单的验证状态没有任何影响。

评论在此链接中。 https://stackoverflow.com/a/30533215

Answer 2

您可以使用jquery来实现这一目标，

<强> HTML

<form action='procesPost.html' method='POST'>
        <div class='radio'>
            <input type='radio' name='test' value=1 id='test1' ></input>
            <input type='radio' name='test' value=2 id='test2' disabled></input>  
        </div>
        <input type='SUBMIT' value='submit'></input>
    </form>

<强> Jquery的

<script>
        $( document ).ready(function() {    
            $('#test1').attr("required",true);
        });
    </script>

Working jsfiddle

为什么我不能在无线电输入字段中同时使用“必需”和“禁用”？

2 个答案: