您好,我正在尝试根据以前的选择制作javascrip验证选项。
这是我的表单代码:
<li><label for="age1">Question One ?</label>
<input type="radio" name="tienes_negocio" value="Yes" class="aboveage1" /> Si
<input type="radio" name="tienes_negocio" value="No" class="aboveage1" /> No</li></ol>
<ol id="parent1" class="formset2">
<li><label for="age2">Question Two ?</label>
<input type="radio" name="labora_negocio" value="Yes" required="true" class="aboveage2" /> Si
<input type="radio" name="labora_negocio" value="No" required="true" class="aboveage2" /> No</li>
基本上,如果您选择 No frm 第一个选择,我想在 selecond 选择中传递所需的属性,
这是 JavaScript 代码:
$(document).ready(function(){
$("#parent1").css("display","none");
$(".aboveage1").click(function(){
if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
$("#parent1").slideDown("fast"); //Slide Down Effect
$('input[name="labora_negocio"]').prop('required', true);
} else {
$("#parent1").slideUp("fast");
$('input[name="labora_negocio"]').prop('required', false); //Slide Up Effect
}
});
});
这是我用于传递 requred 属性的代码: $('#labora_negocio').attr('required');
问题是,当您选择"否"时,它不会传递任何内容。
您有两个具有相同 id 的元素,在 html 中这是一个不行的。此外,在设置实时元素状态时,您应该设置元素属性而不是其 (html) 属性。
您可以通过其名称选择单选按钮,并通过 prop 设置其属性。
<li><label for="age2">Question Two ?</label>
<input type="radio" name="labora_negocio" value="Yes" id="labora_negocio1" class="aboveage2" /> Si
<input type="radio" name="labora_negocio" value="No" id="labora_negocio2" class="aboveage2" /> No</li>
$(".aboveage1").click(function(){
if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
$('[name="labora_negocio"]').prop('required', true);
$("#parent1").slideDown("fast"); //Slide Down Effect
} else {
$('[name="labora_negocio"]').prop('required', false); // not sure about this
$("#parent1").slideUp("fast"); //Slide Up Effect
}
});