最初のロード時にjqueryチェックボックスが起動する

チェックされた属性を制御するラジオボタンがあり、チェックしたラジオボタンのチェックボックスを無効/有効にします。最初のロード時にjqueryチェックボックスが起動する

問題はオンロードです。ラジオボタン2を確認しました。すべてのチェックボックスが有効になります。ラジオボタン1をチェックした場合、最初の2つのチェックボックスを無効にする必要があり、3番目のチェックボックスを有効にしてチェックする必要があります。

このシナリオを繰り返すと、ラジオボタン2をスムーズに実行していますが、ラジオボタン1にチェックマークを付けると、最後にチェックされたボックスにその属性がチェックされていますが、ボックスはチェックされていません。

基本的には、データを送信するために視覚的にチェックする必要があります。

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やjQueryのソリューションは限り大丈夫です。

FIDDLE HERE

出典

2016-04-19 MIke

これは機能しますか？ .prop（ 'checked'、true） –

ありがとうございます。私たちはそれを見落とさなければならない。 – MIke

参考までに、あなたのコードは深刻なリファクタリングが必要です。これはかなりおかしな（そして判読できない...） –

こんにちは親愛なる、それが確認のために働くとラジオボタン変更に/無効のチェックボックスを有効にします。使用して混乱がある場合は、コメントを書いてください。

<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>

出典

2016-04-19 12:07:39 Rajiv

最初のロード時にjqueryチェックボックスが起動する

答えて

関連する問題