Question

我有一张带2个收音机的表格。开始时，必须隐藏第2个收音机盒。（这是我得到的）第2个单选框仅显示未选中选项1的情况。（这是我得到的）

必须始终需要第一个收音机。（这是我得到的）当第2个无线电盒显示时，必须要求它。 ==＆GT;这就是问题所在。

这是我的代码。希望你们能帮助我。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" type="text/javascript"></script>

<script>
jQuery(document).ready(function() {

    jQuery("#form").validate({rules: {E1a:{required: true}}});
    $("#radio2").hide();

    $('#radio1').change(function() {
        if ($("#ervaarzichwassen1").is(':checked')) {
                $("#radio2").hide();
        }
        else
        {
                $("#radio2").show();
                jQuery("#form").validate({rules: {E1b:{required: true}}});
        }
    }); 
});
</script>

</head>
<body>
<form id="form" method="post" action="#">
<h4>Question 1</h4>
    <div id="radio1">
    <input type="radio" id="ervaarzichwassen1" name="E1a" value="1"><label for="ervaarzichwassen1">Verloopt naar wens</label>
    <input type="radio" id="ervaarzichwassen2" name="E1a" value="2"><label for="ervaarzichwassen2">Probleem - niet hinderlijk</label>
    <input type="radio" id="ervaarzichwassen3" name="E1a" value="3"><label for="ervaarzichwassen3">Probleem - hinderlijk voor mij</label>
    <input type="radio" id="ervaarzichwassen4" name="E1a" value="4"><label for="ervaarzichwassen4">Probleem - hinderlijk voor mantelzorger</label>
    <input type="radio" id="ervaarzichwassen5" name="E1a" value="5"><label for="ervaarzichwassen5">Probleem - hinderlijk voor beide</label>
    </div>
<br>
    <div id="radio2">
    <h4>Question 2</h4>
    <input type="radio" id="hieraanwerkenzichwassen1" name="E1b" value="1"><label for="hieraanwerkenzichwassen1">Ja</label>
    <input type="radio" id="hieraanwerkenzichwassen2" name="E1b" value="2"><label for="hieraanwerkenzichwassen2">Nee</label>
    </div>
<br>    
<input type="submit" name="volgende" value="Volgende" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
</form>
</body>
</html>

Answer 1

为什么不在html标签中使用必需

<input type="radio" id="hieraanwerkenzichwassen1" name="E1b" value="1" required><label for="hieraanwerkenzichwassen1">Ja</label>

的jQuery

$("#radio1").prop('required',true);//or   $("#radio1").addClass("required"); 
$("#radio2").prop('required',true);//or   $("#radio2").addClass("required");

修改

如果这不起作用，您可以尝试构建在Modernizr之上的Webshims library（jQuery）。

Answer 2

默认情况下，jquery validate忽略隐藏字段，因此您可以从开始添加E1b所需的规则。忽略隐藏字段的方式是ignore选项，默认情况下是选择器:hidden。

所以你可以这样做：

jQuery(document).ready(function() {

    //By default ignore option is set as ":hidden" so all hidden fields are ignored
    jQuery("#form").validate({
        //ignore: ":hidden", This is the default option, no need to set it
        rules: {
            E1a:{required: true},
            E1b:{required: true}
        }
    });

    $("#radio2").hide();
    $('#radio1').change(function() {
        if ($("#ervaarzichwassen1").is(':checked')) {
            $("#radio2").hide();
        } else {
            $("#radio2").show();
        }
    });    
});

您可以尝试this fiddle。

或者，您可以使用.rules()方法从E1b无线电添加/删除所需规则（虽然我认为第一个选项更清晰，因为您不需要添加/删除规则）：

jQuery(document).ready(function() {
    jQuery("#form").validate({
        rules: {
            E1a:{required: true}
        }
    });
    $("#radio2").hide();

    $('#radio1').change(function() {
        if ($("#ervaarzichwassen1").is(':checked')) {
            $("#radio2").hide();
            $('input[name="E1b"]').rules('remove');
        } else {
            $("#radio2").show();
            $('input[name="E1b"]').rules('add', { required: true });
        }
    }); 
});

检查this fiddle以尝试此方法。

验证：选中并验证时显示单选按钮

2 个答案: