javascript - JQuery Commands Breaking Each Other -
i have code produce form based on selection.
$(document).ready(function(){ $('#dealerform').hide(); $('#customerform').hide(); $('#select').change(function(){ $('#dealerform,#customerform').hide(); $($(this).find('option:selected').attr('value')).show(); }); }); $(document).ready(function(){ $("input[name='emailquest']").change(function(){ if (this.value != "1") { // <----i change this.checked $("input[name='email']").prop("disabled", true); } else { $("input[name='email']").prop("disabled", false); } }); });
well have added code try add datepicker code , breaks previous code , serves whole thing @ once , datepicker doesnt' work. know im doing wrong here , have possible datepicker solution?
$(function(){ $("#datepicker").datepicker(); });
thanks
it not necessary wrap each code bock in new $(document.ready().
this:
$(document).ready(function(){ $('#dealerform').hide(); $('#customerform').hide(); $('#select').change(function(){ $('#dealerform,#customerform').hide(); $($(this).find('option:selected').attr('value')).show(); }); }); $(document).ready(function(){ $("input[name='emailquest']").change(function(){ if (this.value != "1") { // <----i change this.checked $("input[name='email']").prop("disabled", true); } else { $("input[name='email']").prop("disabled", false); } }); }); $(function(){ $("#datepicker").datepicker(); });
can written this:
$(function() { // first block of code $('#dealerform').hide(); $('#customerform').hide(); $('#select').change(function(){ $('#dealerform,#customerform').hide(); $($(this).find('option:selected').attr('value')).show(); }); // second block of code $("input[name='emailquest']").change(function(){ if (this.value != "1") { // <----i change this.checked $("input[name='email']").prop("disabled", true); } else { $("input[name='email']").prop("disabled", false); } }); // last piece $("#datepicker").datepicker(); })
remember, if using both jquery , jqueryui (datepicker jqueryui), must reference both libraries, this:
<html> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" type="text/css" media="all" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { // first block of code $('#dealerform').hide(); $('#customerform').hide(); $('#select').change(function(){ $('#dealerform,#customerform').hide(); $($(this).find('option:selected').attr('value')).show(); }); // second block of code $("input[name='emailquest']").change(function(){ if (this.value != "1") { // <----i change this.checked $("input[name='email']").prop("disabled", true); } else { $("input[name='email']").prop("disabled", false); } }); // last piece $("#datepicker").datepicker(); }) </script> </head>
Comments
Post a Comment