jquery checkbox triggering on first load only

Question

ich habe eine radio-taste, die das checked-attribut steuert und die checkbox aktiviert/aktiviert, auf welchen radio button du gecheckt hast.

Das Problem ist onload Ich habe den Radiobutton 2 überprüft. dann sind alle Kontrollkästchen aktiviert. Wenn ich den Radiobutton 1 ankreuze, muss das erste 2 Kontrollkästchen deaktiviert sein und das dritte Kontrollkästchen sollte aktiviert bleiben und es muss überprüft werden.

Wenn Sie dieses Szenario wiederholen. Wenn Sie das Kontrollkästchen aktiviert haben, wird das letzte Kontrollkästchen aktiviert. Das Kontrollkästchen wurde jedoch nicht aktiviert.

Grundsätzlich muss dies visuell überprüft werden, damit die Daten gesendet werden.

HTML:

<span><input type="radio" name="attendee" id="guest1" value="1">1</span> <span><input type="radio" name="attendee" id="guest2" value="2" checked="checked">2</span><br> 

<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required JPCCheck"><span class="wpcf7-list-item first"><input type="checkbox" name="attending2[]" value="14 september - Welcome Dinner">&nbsp;<span class="wpcf7-list-item-label">14 september - Welcome Dinner</span></span><span class="wpcf7-list-item"><input type="checkbox" name="attending2[]" value="15 september Wedding Day">&nbsp;<span class="wpcf7-list-item-label">15 september Wedding Day</span></span><span class="wpcf7-list-item last"><input type="checkbox" name="attending2[]" value="N/A">&nbsp;<span class="wpcf7-list-item-label">N/A</span></span></span> 

SCRIPT:

$(function(){ 
    $("#guest1").click(function(){ 
     if($(this).is(":checked")) { 
     $('input[name="attending2[]"]').prop('disabled', true).css("background","#666").attr("checked", false); 
     $('.last input[name="attending2[]').prop('disabled', false).css("background","#666").attr("checked", true); 
     $('select[name="foodspec2"]').val("N/A").prop('disabled', true).css("background","#666"); 
     $('select[name="country2"]').val("N/A").prop('disabled', true).css("background","#666"); 
     $("input[name='salutation2']").val("N/A").prop('readonly', true).css("background","#666"); 
     $("input[name='name2']").val("N/A").prop('readonly', true).css("background","#666"); 
     $("textarea[name='address22a']").val("N/A").prop('readonly', true).css("background","#666"); 
     $("textarea[name='address22b']").val("N/A").prop('readonly', true).css("background","#666");     
     $("input[name='city2']").val("N/A").prop('readonly', true).css("background","#666"); 
     $("input[name='postal2']").val("000").prop('readonly', true).css("background","#666"); 
     $("input[name='passcode2']").val("000").prop('readonly', true).css("background","#666"); 
     return; 
     } 

    }); 

    $("#guest2").click(function(){ 
     if($(this).is(":checked")) { 
     $('input[name="attending2[]"]').prop('disabled', false).css("background","#dadada").attr("checked", false); 
     $('.last input[name="attending2[]').prop('disabled', false).css("background","#666").attr("checked", false); 
     $('select[name="foodspec2"]').val(" ").prop('disabled', false).css("background","#dadada"); 
     $('select[name="country2"]').val(" ").prop('disabled', false).css("background","#dadada"); 
     $("input[name='salutation2']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("input[name='name2']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("textarea[name='address22a']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("textarea[name='address22b']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("input[name='city2']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("input[name='postal2']").val(" ").prop('readonly', false).css("background","#dadada"); 
     $("input[name='passcode2']").val(" ").prop('readonly', false).css("background","#dadada"); 
    } 
    }); 
}); 

Javascript oder Jquery Lösungen sind in Ordnung, solange die Funktionen wie arbeiten gesagt.

FIDDLE HERE

Answer 1

Hallo Liebe es für aufgegebene arbeiten und aktivieren/deaktivieren Check-Box auf Optionsfeld ändern. Wenn Verwechslungen auftreten, schreiben Sie einen Kommentar.

<body> 
     <span> 
      <input type="radio" name="attendee" id="guest1" value="1"> 
      1</span><span> 
      <input type="radio" name="attendee" id="guest2" value="2" checked="checked"> 
      2</span> 
     <br> 
     <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required JPCCheck"><span class="wpcf7-list-item first"> 
       <input type="checkbox" name="attending2[]" value="14 september - Welcome Dinner"> 
       &nbsp;<span class="wpcf7-list-item-label">14 september - Welcome Dinner</span></span><span class="wpcf7-list-item"> 
       <input type="checkbox" name="attending2[]" value="15 september Wedding Day"> 
       &nbsp;<span class="wpcf7-list-item-label">15 september Wedding Day</span></span><span class="wpcf7-list-item last"> 
       <input type="checkbox" name="attending2[]" value="N/A"> 
       &nbsp;<span class="wpcf7-list-item-label">N/A</span></span></span> 
     <script> 
      $(function() { 
       $(document).on("change", "#guest1, #guest2", function() { 
        var radioVal = $(this).val(); 
        var checkLength = $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').length; 

        if (radioVal == 1) { 
         for (var i = 0; i < checkLength; i++) { 
          if (i == (checkLength - 1)) { 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false); 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop('checked', true); 
          } else 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", true); 
         } 
        } else { 
         for (var i = 0; i < checkLength; i++) { 
          if (i == (checkLength - 1)) { 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false); 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop('checked', false); 
          } else 
           $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false); 
         } 

        } 
       }); 
      }); 
     </script> 
    </body>