Validation not working with jQuery 1.5.2

I'm using a cart script and I want to add some functionality to it. The script uses PHP, Smarty and jQuery 1.5.2.

I got everything to work except validating an input field. I want several form fields to be disabled until a check box is ticked or until text is added to a particular text field or better yet, use a dropdown field with "yes" or "no" options and enable the fileds when "yes" is selected.

Below is the code I am currently using. It is supposed to enable the '#product_aff_header' checkbox when text is typed in the '#product_aff_url' textbox. It works but the checkbox does not get re-disabled if the user goes back and deletes the text from the textbox.

...
<div class="form-field">
<label for="product_aff_url">Affiliate URL</label>
<input type="text" name="product_data[aff_url]" id="product_aff_url" size="100" value="{$product_data.aff_url}" class="input-text-medium" style="width:300px" onkeyup="fn_product_header_setting(this);" />

{if $product_data.aff_url != ""}
{assign var="header_setting" value=true}
{/if}
</div>
<div class="form-field">
<label for="product_aff_header">Affiliate Header</label>
<input type="hidden" name=" product_data[aff_header]" value="N" />
<input type="checkbox" name="product_data[aff_header]" id="product_aff_header" value="Y" {if $product_data.aff_header == "Y"}checked="checked"{/if} class="checkbox header-dependence" {if !$header_setting}disabled="disabled"{/if}/>
</div>

<script type="text/javascript">
//<![CDATA[
{literal}
function fn_product_header_setting(elm)
{
var jelm = $(elm);
var available = false;

$('input', jelm.parent()).each(function() {
if (parseInt($(this).val()) != "") {
available = true;
}
});

$('input.header-dependence').attr('disabled', (available ? false : true));

}

{/literal}
//]]>
</script>
...

I googled but cannot figure out how to make it re-disable the checkbox. I came across the code below but it does not work with jQuery 1.5.2. Unfortunately, I have to stick with that version of jQuery for compatibility issues.

...
<input type="checkbox" id="pizza" name="pizza" value="yes">
<label for="pizza">I would like to order a</label>
<select id="pizza_kind" name="pizza_kind">
<option>(choose one)</option>
<option value="margaritha">Margaritha</option>
<option value="hawai">Hawai</option>
</select>
pizza.


<script>
{literal}
var update_pizza = function () {
if ($("#pizza").is(":checked")) {
$('#pizza_kind').prop('disabled', false);
}
else {
$('#pizza_kind').prop('disabled', 'disabled');
}
};
$(update_pizza);
$("#pizza").change(update_pizza);
{/literal}
</script>
...

Anyone have any ideas how I can get this to work? I read something about adding a jQuery reset setInterval timer but that's above my head. Could not figure it out.

 

I don't see any code that checks for the textbox being blank. Did I miss it?

 

Maybe that's what's missing. I don't know. I copied the code from another portion of the website. I double checked and there is no additional code from where I copied it but it works there???

 

The code you're missing may not be physically close to the code you copied. Javascript can be anywhere on the page, or even in another file (or on another site). There may be some trigger for the checkbox based on whether available is true or false. Also, did you change the id of the checkbox (and all the code that refers to it)? You can't have 2 elements with the same id.

 

Check out this, i found this helpful:
http://softstribe.com/wordpress/how-tos/validate-form-fields-using-jquery-form-validation-engine