.prop if statement with JQuery

1.8k Views Asked by At

I'm trying to understand why when I use a .prop() on a radio button for an if statement it will always return false. My goal is to have JS run only if the "#manualOverrideNo"radio button is selected. If anyone could enlighten me I would be very grateful. Here is a fiddle of a snippet of code - http://jsfiddle.net/gv0029/xEfw4/1/ - and here as well:

HTML: Manual Overide:

<label>No<input type="radio" name="manualOverride" 
id="manualOverrideNo" value="no" checked /></label>

<label>Yes<input type="radio" name="manualOverride" 
id="manualOverrideYes" value="yes" /></label>

<label>Footage:<input type="number" id="footage" 
name="footage" value="" /></label>  

<label>Post Quantity:<input type="postQuantity" 

name="postQuantity" id="postQuantity" value="" /></label> 

JS:

if($('#manualOverrideNo').prop('checked')) {
    //Code For Auto-complete

            //Quantity for Posts
            $('#footage').bind('keypress keydown keyup change', function(){
                var footage = parseFloat($(':input[name="footage"]').val(),10);
                var total = '';
                if(!isNaN(footage)){
                total = Math.ceil(footage /7);
                }
        $(':input[name="postQuantity"]').val(total.toString());
            });
}

Thanks again! Y'all are my hero!

1

There are 1 best solutions below

1
On

I've changed the fiddle and it should work now

http://jsfiddle.net/xEfw4/5/

you needed to have .prop instead of .attr in the fiddle, also, you need to check the value after the action has occurred, not when the page loads.

//Code For Auto-complete
//Quantity for Posts
$('#footage').bind('keypress keydown keyup change', function()
{
    if($('#manualOverrideNo').prop('checked')) 
    {
        var footage = parseFloat($(':input[name="footage"]').val(),10);
        var total = '';
        if(!isNaN(footage))
        {
            total = Math.ceil(footage /7);
        }
        $(':input[name="postQuantity"]').val(total.toString());
    }
});

http://api.jquery.com/prop/ has info on the difference between attributes and properties.