mardi 19 avril 2016

jquery checkbox triggering on first load only

i have a radio button that controls the checked attribute and disable/enable the checkbox regards on what radio button you've checked.

The problem is onload I have the radiobutton 2 checked. then all of the checkboxes are enabled. If I checked the radio button 1, the first 2 checkbox must be disabled and the 3rd one should remain enabled and it has to be checked.

if you repeat this scenario. checking the radio button 2 run smoothly but if you checked back to radio button 1 the last checked box is marked checked on its attribute but the box doesn't have checked.

Basically this need to be checked visually in order for the data to be 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">&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 or jquery solutions are okay as long as the functions are working as been said.

FIDDLE HERE

Aucun commentaire:

Enregistrer un commentaire