javascript - jquery checkbox triggering on first load only -
i have radio button controls checked attribute , disable/enable checkbox regards on radio button you've checked.
the problem onload have radiobutton 2 checked. of checkboxes enabled. if checked radio button 1, first 2 checkbox must disabled , 3rd 1 should remain enabled , has checked.
if repeat scenario. checking radio button 2 run smoothly if checked radio button 1 last checked box marked checked on attribute box doesn't have checked.
basically need checked visually in order data sent.
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"> <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"> <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"> <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 or jquery solutions okay long functions working been said.
fiddle here
hello dear work checked , enable/disabled check-box on radio button change. if use have confusion write comment.
<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"> <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"> <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"> <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) { (var = 0; < 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 { (var = 0; < 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> 
Comments
Post a Comment