Kontrollkästchen Ereignis ändern, um ein anderes Feld auszulösen

Question

Ich habe ein Formular mit mehreren Kontrollkästchenfeldern und einem entsprechenden Kommentarfeld für jedes Kontrollkästchen. Ich erstelle diese Felder dynamisch. Zum Beispiel würde das Kontrollkästchenfeld tag1Kommentare1 entsprechen. Wenn das Kontrollkästchen aktiviert ist, möchte ich keine Kommentare benötigen. Wenn es nicht markiert ist, möchte ich Kommentare benötigen.

Manchmal sind die Felder basierend auf der letzten Eingabe eines Benutzers bereits ausgefüllt. Mit anderen Worten, das Kontrollkästchen ist möglicherweise bereits aktiviert, wenn die Seite geladen wird oder nicht. Ich habe Logik gesetzt, um das entsprechende Kommentarfeld als erforderlichen oder basierend darauf basierend nicht zu erstellen.

Alles Situation scheint außer einem zu arbeiten. Wenn ich das Kästchen ankreuze und dann das Kästchen abnehme, kann ich das Formular ohne Kommentare abgeben. Unten ist was ich versucht habe.

$(document).on('change', 'input[type=checkbox]', function() { 
    var checkbox = $(this), 
    otherInput = $('#comments' + this.id.replace('tag', '')); 


    otherInput.removeProp('required', !checkbox.is(':checked')); 
    if (!checkbox.not(':checked')){ 
    otherInput.prop('required',true); 
    } 
}); 

-------------------- zweiten Versuch

$(document).on('change', 'input[type=checkbox]', function() { 
    var checkbox = $(this), 
    otherInput = $('#comments' + this.id.replace('tag', '')); 

    otherInput.prop('required', !checkbox.not(':checked')); 
    otherInput.removeProp('required', !checkbox.is(':checked')); 

}); 

Beide lösen die gleichen Situationen, mit Ausnahme der oben erwähnt. Bitte beraten.

Answer 1

einfach schalten Sie die 'erforderlich' Eigenschaft basierend auf Checkbox Status

$(document).on('change', 'input[type=checkbox]', function() { 
    var checkbox = $(this), 
    otherInput = $('#comments' + this.id.replace('tag', '')); 

    otherInput.prop('required', !checkbox.is(':checked')); 

}); 

Sehen Sie diese JSFiddle

Answer 2

Wenn die Schaltfläche "Senden" gedrückt wird, tun Sie Ihre Validierung:

psuedocode:

onSubmitPressed: function(){ 
    if(checkbox is checked){ 
     // alert user field is required; 
     return false; 
    }else{ 
     return true; 
    } 

Answer 3

Sieht aus, als hätte ich eine schlechte Syntax, aber es hat keinen Fehler geworfen. Ich änderte meinen ersten Versuch:

$(document).on('change', 'input[type=checkbox]', function() { 
    var checkbox = $(this), 
    otherInput = $('#comments' + this.id.replace('tag', '')); 

    otherInput.removeProp('required', !checkbox.is(':checked')); 

    if ($(this).is(':not(:checked)')){ 
    otherInput.prop('required',true); 
    console.log('working'); 
    } 
}); 

Das nun hinzufügt und entfernt das gewünschte Attribut basierend auf dem Kontrollkästchen aktiviert wird oder nicht geprüft.