如果复选框被选中，那么电子邮件字段不需要

Question

我有一个带有一些输入字段和一些复选框的表单。通常，用户必须填写一个电子邮件地址。但是，如果选中了特定的复选框，则不需要电子邮件地址。

这是电子邮件的HTML:

<div class="contact-label span2">
  <label for="contactpersonen-email">Email adres</label>
  <div class="contact-input-field">
    <input type="text" class="input-text span2 required contactpersonen-email" id="contactpersonen_email1" name="contactpersonen_email1"></input>
  </div>
</div>

这是JavaScript:

 jQuery.validator.addMethod("contactpersonen-email",function(value) {
        if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked')     || $("#contactpersonen_canseestock_5").is(':checked')) {
        // && $('#idform :checkbox:checked').length == 1) {
                console.log("checkbox true");
                console.log(contactpersonen_email1.val());
                return true;
            }
            else {
                console.log("checkbox not true");
                return false;
            }
        }, "Email adres bestaat al");
        jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true };
        $("#idform").validate();

所以只有当:

<label class="checkbox" for="contactpersonen_canseestock_2">Mag goederen afhalen</label>

为:checked，则不需要电子邮件地址。

I've made this post earlier:
http://stackoverflow.com/questions/39980216/check-if-only-one-checkbox-is-checked/39980734#39980734
But there was not duplicate email required in that question. 
But now it has, but only if checkbox `contactpersonen_canseestock_2` is checked, then the email adress is not required.

如果我这样做:

$("#contactpersonen_email1").focusout(function () {
if ($('input:checkbox').is(':checked')) {
       $("input#contactpersonen-email").removeClass( "required" );
}
else{
       $("input#contactpersonen-email").addClass( "required" );
}

});

jQuery.validator.addMethod("contactpersonen-email1",function(value) {


        if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked')
 || $("#contactpersonen_canseestock_5").is(':checked'))    {// && $('#idform :checkbox:checked').length == 1) {

        console.log("checkbox true");
        console.log(contactpersonen_email1.val());
        return true;
        }
        else{
        console.log("checkbox not true");
        return false;
        }
    }, "Email adres bestaat al");
    jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true };
$("#idform").validate();

它不工作。

在

文档的上方，我设置了:

                                contactpersonen_email:{
                                required:true,
                                email:true
                                },
                                contactpersonen_email1:{
                                required:false,
                                email:true

这是我现在的jquery:

jQuery.validator.addMethod("contactpersonen-email1", function(value) {
        if ($("#contactpersonen_canseestock_2").is(':checked')) {
    alert('is checked');
       $("#contactpersonen-email1").removeAttr('required', false);
}
else{
       $("#contactpersonen-email1").Attr('required', true );
}
}, "Please fill in email");


jQuery.validator.addMethod("contactpersonen-email",function(value) {


        if ($("#contactpersonen_canseestock_2").is(':checked') || $("#contactpersonen_canseestock_3").is(':checked') || $("#contactpersonen_canseestock_4").is(':checked')
 || $("#contactpersonen_canseestock_5").is(':checked'))    {// && $('#idform :checkbox:checked').length == 1) {

        console.log("checkbox true");
        console.log(contactpersonen_email1.val());
        return true;
        }
        else{
        console.log("checkbox not true");
        return false;
        }
    }, "Email adres bestaat al");
    jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true };
$("#idform").validate();
                        // Loop through all the input fields for contacts
                        $('#accordion .user-row').each(function (uindex, uvalue) {
         if ($("#contactpersonen_canseestock_2").is(':checked')) {
    console.log('is checked');
        $("#contactpersonen-email1").prop('required',false);
       //$("#contactpersonen-email1").removeAttr('required', false);
}
else{
  //document.getElementById("#contactpersonen-email1").required = true
       //$("#contactpersonen-email1").attr('required', true );
    $("#contactpersonen-email1").prop('required',true);
console.log('is not checked');
}               

                            html += '<tr>';
                            $(this).find('input').each(function (index, value) {                                

                                // Check if input type is a checkbox
                                if ($(this).is(":checkbox")) {
                                    var JaNee = 'Nee';
                                    if ($(this).is(":checked")) JaNee = 'Ja';
                                    html = html + '<td>' + JaNee + '</td>';

                                }
                                else {
                                    // Add the value into the html
                                    html = html + '<td>' + $(this).val() + '</td>';
                                }
                            });
                            html += '</tr>';
                        });
                                    // Set the value from the textarea to the generated html
                                    $('#verploegen_form_klantregistratie_Contactpersonen').val('<table>'+html+'</table>');
                                });
                            });

              $(function () {
                    $("#accordion").accordion({
                        heightStyle: "content"
                    });
                });

这是我的email html:

<div class="contact-label span2">
          <label for="contactpersonen-email">Email adres</label>
          <div class="contact-input-field">
            <input type="text" class="input-text span2" id="contactpersonen_email1" required="" name="contactpersonen_email1"></input>
          </div>
        </div>

这是现在的jquery:

jQuery.validator.addMethod("CheckTotal",function(value) {
       if ($("#contactpersonen_canseestock_2").is(':checked')){
       $("#contactpersonen-email1").removeAttr('required', false);
    }
    else{
      $("#contactpersonen-email1").attr('required', true );
            }
        }, "Email adres bestaat al");
    jQuery.validator.classRuleSettings.CheckTotal = { CheckTotal: true };
$("#idform").validate();

和这个my html:

<div class="contact-label span2">
          <label for="contactpersonen-email">Email adres</label>
          <div class="contact-input-field">
            <input type="text" class="input-text span2 required CheckTotal" id="contactpersonen_email1"  name="contactpersonen_email1"></input>
          </div>
        </div>

Answer 1

试一下，

你想删除'required'类吗?使用下面的代码:

if ($('input:checkbox').is(':checked')) {
       $("input#contactpersonen-email").removeClass( "required" );
}
else{
       $("input#contactpersonen-email").addClass( "required" );
}

你想删除属性'required'吗?使用下面的代码:

if ($('input:checkbox').is(':checked')) {
       $("input#contactpersonen-email").removeAttr("required");
}
else{
       $("input#contactpersonen-email").attr( "required" );
}