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"
                    });
                });

这是我的电子邮件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();

这是我的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

试试这个，

要删除“必需”类，请使用以下代码：

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" );
}

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

1 个答案: