Hide/Show form inputs and change values

Question

I'm stumped, so now I turn to my fellow developers for assistance. This is probably something really simple I'm overlooking, but you know how it is when you look too hard at something, usually it's right there and you just miss it. Any way enough rambling from me, to the point!

I have this application, I only need assistance with a snippet of it. It's been put together with bootstrap 3, so I don't know if that has something to do with it or not. What I'm trying to do is, on click of the checkbox #mailing_address, check the change, and if it is checked add the values from the current address sections #p_address, #p_address2, #p_city, #p_state, #p_zip, to their respective #m_ values in the next set of inputs, then disable the #m_ inputs so that they can't be changed. This part works

On the change of #mailing_address again if the box is unchecked, clear all the #m_ inputs and enable the inputs again. This is the part that will not work.

Here is the form snippet that is giving me this issue

<div class='form-group'>
                <div class='col-md-5 col-md-offset-1 col-sm-6'>
                    <div class='input-group app-input'>
                        <input type='text' class='form-control' id='p_address' placeholder='Your Current Address'>
                        <span class='input-group-addon'><span class='glyphicon glyphicon-home'></span></span>
                    </div>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-5 col-md-offset-1 col-sm-6'>
                        <input type='text' class='form-control' id='p_address2' placeholder='Current Address Line 2'>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <input type='text' class='form-control' id='p_city' placeholder='Your Current City'>                        
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <select class='form-control' id='p_state'>                      
                        <option value="" selected>Your Current State</option>
                        <? include $up_level.'inc/body/extras/state_list_options.php';?>
                    </select>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <input type='text' class='form-control' id='p_zip' placeholder='Your Current Zip'>                      
                </div>
            </div>
            <div class='form-group'>
                <div class='col-md-5 col-md-offset-1'>
                    <div class='checkbox'>
                        <label><input type='checkbox' id='mailing_address'>Check here if your mailing address is the same as your current address</label>
                    </div>
                </div>
            </div>
            <div class='form-group'>
                <div class='col-md-5 col-md-offset-1 col-sm-6'>
                    <div class='input-group app-input'>
                        <input type='text' class='form-control' id='m_address' placeholder='Your Mailing Address'>
                        <span class='input-group-addon'><span class='glyphicon glyphicon-home'></span></span>
                    </div>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-5 col-md-offset-1 col-sm-6'>
                        <input type='text' class='form-control' id='m_address2' placeholder='Mailing Address Line 2'>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <input type='text' class='form-control' id='m_city' placeholder='Your Mailing City'>                        
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <select class='form-control' id='m_state'>                      
                        <option value="" selected>Your Mailing State</option>
                        <? include $up_level.'inc/body/extras/state_list_options.php';?>
                    </select>
                </div>
            </div>
            <div class='form-group app-input-no-group'>
                <div class='col-md-3 col-md-offset-1 col-sm-4'>
                    <input type='text' class='form-control' id='m_zip' placeholder='Your Mailing Zip'>                      
                </div>
            </div>

for references the include statement with the file 'state_list_options.php' is just a list of select options with state names and abbreviations like so:

<option value='AZ'>Arizona</option>

Here is the Jquery code that I name put together for it

$(document).ready(function(){
    //check if the mailing address checkbox is checked
    //if so then we will fill the mailing address in with the information from current address   then hide all the mailing address fields
    //else clear the mailing address fields and show them again
    //set variables 
    var p_values = ['p_address', 'p_address2', 'p_city', 'p_state', 'p_zip'];
    var m_values = ['m_address', 'm_address2', 'm_city', 'm_state', 'm_zip'];
    $("#mailing_address").change(function(){
        if($(this.checked)){
        //if checked get the values from the current address fields
            for(var i = 0; i < p_values.length; i++){
                $('#'+m_values[i]+'').val($('#'+p_values[i]+'').val());
                $('#'+m_values[i]+'').attr('disabled', 'disabled');
            }
        }
        else{
            //this is the part that is failing
            for(var i = 0; i < p_values.length; i++){
                $('#'+m_values[i]+'').val("");
                $('#'+m_values[i]+'').removeAttr('disabled');
            }
        }
    });
});

Does it have something to do with that fact that I'm using ids instead of classes or names for the inputs? I don't think that should matter. I really don't know though, I am absolutely stumped. I can add more detail if needed let me know!

Answer 1

Remove the $() from around this.checked jsFiddle

if(this.checked){

If you wanted it to be a jQuery object then it would look like this

if($(this).is(':checked')){

Answer 2

Use if($(this).is(':checked')){ - the correct syntax for checking in jQuery.

http://jsfiddle.net/cfm1v0p7/