SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Baltimore, MD
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery: Beginning question (didn't find answer elsewhere)

    Hi,

    Just started using jQuery this morning and love it. I would be shocked if this hasn't been asked before but I have Googled and searched for about an hour and haven't found anything.

    I have a checkout system. I have a div for shipping information, and a checkbox above it that allows a user to specify in-store pickup. When you check the checkbox, the div with shipping information disappears. It works great and looks even better!

    The functionality works exactly as it should -- my only problem is, the checkbox doesn't get checked!

    Here's my code:

    Code:
    $(document).ready(function(){
    	   $("#CheckoutChurchPickup").toggle(function(){
    	     $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
    	   },function(){
    	     $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');
    	   });
    	 });
    I have tried adding $("#CheckoutChurchPickup").attr('checked', 'checked');, $("#CheckoutChurchPickup").checked = true; and other things I've found to no avail. The functionality works great, but the element still appears unchecked. What can I do.

    Thank you very much!

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .attr('checked', true) perhaps? And are you sure you have the right ID on the input, and you're doing this after the dom has been loaded?

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Baltimore, MD
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply!

    I had tried that also, and it didn't work. I know I have the ID right and I'm doing it after the DOM loads because adding this:

    Code:
    $("#CheckoutChurchPickup").attr('disabled', 'disabled');
    ...works as expected (the shipping information box disappears, and then the checkbox element becomes disabled).

    However, replacing that line with this:

    Code:
    $("#CheckoutChurchPickup").attr('checked', 'checked');
    provides no dice.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Baltimore, MD
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, I see you're from MD also. Enjoying the weather this week?

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Location
    Alexandria, VA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm with SoulScratch on the .attr("checked",true)

    Code:
    <html>                                                                  
     <head>                                                                  
     <script type="text/javascript" src="javascript/jquery.js"></script>          
     <script type="text/javascript">                                         
    
    function toggleCheckboxes()
    {
    	 if($("#isChecked").attr("checked") == true)
    	 {
    		  $("#isChecked").attr("checked",false);
    		  $("#isNotChecked").attr("checked",true);
    	 }
    	 else
    	 {
    		  $("#isChecked").attr("checked",true);
    		  $("#isNotChecked").attr("checked",false);
    	 }
     } 
     </script>                                                               
     </head>                                                                 
     <body>           
            Start Checked:<input type="checkbox" id="isChecked" value="100" checked>   <br>                                            
    		Start Unchecked:<input type="checkbox"id="isNotChecked"  value="200">  <br>
    		<input type="button" onClick="toggleCheckboxes()" value="uncheck/check";>
                                            
     </body>                                                                 
     </html>

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Baltimore, MD
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works with a different attribute --

    Code:
    $("#CheckoutChurchPickup").attr("disabled",true);
    works but

    Code:
    $("#CheckoutChurchPickup").attr("checked",true);
    doesn't? Is there anything that could be causing 'checked' to not be recognized?


    I even extracted it from my site and put it in a test file just to make sure. Here is the full code:

    Code:
    <html>                                                                  
    	<head>                                                                  
    		<script type="text/javascript" src="jquery.js"></script>
    	</head>
    	
    	<body>
    
    	<h2>Shipping Information</h2>
    	<script type="text/javascript">
    		$(document).ready(function(){
    	   $("#CheckoutChurchPickup").toggle(function(){
    	     $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
    	     $("#CheckoutChurchPickup").attr("checked",true);
    	   },function(){
    	     $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');
    	   });
    	 });
    	</script>
    	<p>
    		<input type="checkbox" name="data[Checkout][church_pickup]" style="float: left;"  id="CheckoutChurchPickup" /> 
    		<label for="CheckoutChurchPickup">I attend RCC and would like to pick my order up on Sunday morning</label>
    	</p>
    	<div id="shippingInformation">
    		<p>form was here...</p>
    	</div>
    	
    </body>
    </html>
    .attr("disabled",true) works; .attr("checked",true) doesn't? I also thought it might be something with IE doing something crazy, but I get the same results in Firefox.

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    toggle: function() {
    // Save reference to arguments for access in closure
    var args = arguments;

    return this.click(function(event) {
    // Figure out which function to execute
    this.lastToggle = 0 == this.lastToggle ? 1 : 0;

    // Make sure that clicks stop
    event.preventDefault();

    // and execute the function
    return args[this.lastToggle].apply( this, arguments ) || false;
    });
    },
    I think the line in bold is the cause. It prevents an action from being taken (in this case, the check). Maybe just have a custom toggle function without this? Hmm

  8. #8
    SitePoint Member
    Join Date
    Oct 2006
    Location
    Alexandria, VA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually the .attr("checked",true) is working.
    Stick an alert box right after it and you can see the check mark

    $("#CheckoutChurchPickup").attr("checked",true);
    alert("pause");

    It looks like when it exits out of the toggle function it's resetting to unchecked.

    Avoiding the problem might be easier than solving it

    Code:
    <script type="text/javascript">
        $(document).ready(function(){
    	   $("#CheckoutChurchPickup").click(function(){
    		 
    		 if( $("#CheckoutChurchPickup").attr("checked")==true)
    		 {	  
    	    	         $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');  
    		 }
    		 else
    		 {
    	                 $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
    		 }	   
      
    	   });
    	 });
    	</script>
    Last edited by sequill; Feb 22, 2008 at 14:35. Reason: formatting

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is probably a very, very dirty fix that could probably be avoided by correctly using the right methods.. but i think i found a way to get it to work..

    Code:
    	    $.fn.toggleTwo = function() {
    		var args = arguments;
    		return this.click(function(event) {
    		    this.lastToggle = 0 == this.lastToggle ? 1 : 0;
    		    // and execute the function
    		    return args[this.lastToggle].apply( this, arguments );
    		});
    	    }
    Code:
    	$(document).ready(function(){
    	    $('#CheckoutChurchPickup').toggleTwo(function() {
    		$('#shippingInformation').animate({height:'hide', opacity:'hide'}, 'fast');
    	    }, function() {
    		$('#shippingInformation').animate({height:'show', opacity:'show'}, 'fast');
    	    });
    	});
    I removed the line that prevented the default action from taking place, and false is no longer returned from the anon. function inside.

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Baltimore, MD
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sequill, I got it working with your code. Thank you so much!

    And SoulScratch, that's a good workaround -- thank you for your help also.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •