Machen Sie nur 2 Kontrollkästchen pro Formular aktiviert

Question

Ich habe mehrere Formulare auf einer Seite mit den gleichen Eingabe-Namen. Der einzige Unterschied zwischen Formularen sind die Formen, die sie enthalten.

Für die Gruppen von Kontrollkästchen in meinem Formular, ich möchte nur zwei Checkboxen von drei zu überprüfen, aber ich möchte nicht die Kontrollkästchen in einem Formular beeinflussen eine andere.

Ich habe eine jsFiddle von dem, was ich jetzt habe.

Ich habe es jetzt eingerichtet, dass nur zwei Checkboxen von drei geprüft werden können, aber das ist für das gesamte Dokument, nicht formspezifisch.

Die Formulare in meiner Seite sind mit einer Schleife erstellt und die ID des Formulars ist der einzige Unterschied zwischen ihnen.

Kann jemand dabei helfen?

https://jsfiddle.net/likwidmonster/3zbs61q5/

$('input[type=checkbox][name=group]').on('change', function(e) { 
 
    if ($('input[type=checkbox][name=group]:checked').length < 2) { 
 
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('input[type=checkbox][name=group]:checked').length == 2) { 
 
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Answer 1

Da die Formulare dynamisch sind vielleicht wird dies besser zu nutzen sein.

Ich habe eine jfiddle erstellt und es in den Kommentar, aber das ist nur gut für diese beiden Formen. Vielleicht möchtest du mehr hinzufügen? JSFiddle Demo

this.parentNode.id; 

this verwendet wird, um das Element zum Ziel, die Funktion Auslösung wird .parentNode verwendet, um das Formularelement zu erhalten und .id verwendet wird, um die ID des Formulars zu erhalten, so dass Sie diese spezielle Form ausrichten können bedeuten, dass Sie nur eine benötigen if Bedingung, um dies für alle Formulare auszuführen!

$('form input[type=checkbox][name=group]').on('change', function(e) { 
 
var MyForm=this.parentNode.id; 
 
    if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) { 
 
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Wenn Sie Fragen haben, lassen Sie einen Kommentar unten, und ich werde so schnell wie möglich auf Sie zurückkommen.

Ich hoffe diese Hilfe. Glückliche Kodierung!

Answer 2

Hier ist eine funktionierende Lösung. Ich hoffe es hilft!

$('input[type=checkbox][name=group]').on('change', function(e) { 
 
    if ($('#form_1 input[type=checkbox][name=group]:checked').length === 2) { 
 
    $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('#form_2 input[type=checkbox][name=group]:checked').length === 2) { 
 
    $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Answer 3

eine Funktion Verwenden Sie Ihre Event-Handler für jede Gruppe zu initialisieren. Verwenden Sie auch einen anderen Gruppennamen.

https://jsfiddle.net/3zbs61q5/3/

function setupCheckboxGroup(grpName){ 
 

 
$('input[type=checkbox][name='+grpName+']').on('change', function(e) { 
 
    if ($('input[type=checkbox][name='+grpName+']:checked').length < 2) { 
 
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('input[type=checkbox][name='+grpName+']:checked').length == 2) { 
 
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', 'disabled'); 
 
    } 
 
}); 
 

 
} 
 

 
setupCheckboxGroup('group'); 
 
setupCheckboxGroup('group2');

<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group2" value="1"> 
 
    <input type="checkbox" name="group2" value="2"> 
 
    <input type="checkbox" name="group2" value="3"> 
 
    </form> 
 
</div>