Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    jQuery Function - How to Count Values in This Function

    Hey All,

    I've got the following function which toggles checkbox and row visibility in a DataTable via ColVis.js (http://datatables.net/release-datata...a/js/ColVis.js).

    I haven't had any luck on their support side and was hoping I could get some assistance here. The task seems easy - I need to count the number of checkboxes that are "checked" and if more than X are checked, pop an alert saying they've reached their max and they need to uncheck another one first. Here's the code of the specific function:

    Code:
    	"_fnDomColumnButton": function ( i )
    	{
    		var
    			that = this,
    			oColumn = this.s.dt.aoColumns[i],
    			nButton = document.createElement('button'),
    			nSpan = document.createElement('span'),
    			dt = this.s.dt;
    		
    		nButton.className = !dt.bJUI ? "ColVis_Button TableTools_Button" :
    			"ColVis_Button TableTools_Button ui-button ui-state-default";
    		nButton.appendChild( nSpan );
    		var sTitle = this.s.fnLabel===null ? oColumn.sTitle : this.s.fnLabel( i, oColumn.sTitle, oColumn.nTh );
    		$(nSpan).html(
    			'<span class="ColVis_radio"><input type="checkbox"/></span>'+
    			'<span class="ColVis_title">'+sTitle+'</span>' );
    		
    		// start here
    		$(nButton).click( function (e) {
    			//alert("add check to see how many columns are visible.  if too many (say 8), reject/return false and show error message. ");
    			
    			var showHide = !$('input', this).is(":checked");
    			if ( e.target.nodeName.toLowerCase() == "input" )
    			{
    				showHide = $('input', this).is(":checked");
    			}
    			
    			/* Need to consider the case where the initialiser created more than one table - change the
    			 * API index that DataTables is using
    			 */
    			var oldIndex = $.fn.dataTableExt.iApiIndex;
    			$.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that);
    
    			// Optimisation for server-side processing when scrolling - don't do a full redraw
    			if ( dt.oFeatures.bServerSide && (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" ) )
    			{
    				that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );
    				that.s.dt.oInstance.fnAdjustColumnSizing( false );
    				that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );
    				that._fnDrawCallback();
    			}
    			else
    			{
    				that.s.dt.oInstance.fnSetColumnVis( i, showHide );
    			}
    
    			$.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */
    			
    			if ( that.s.fnStateChange !== null )
    			{
    				that.s.fnStateChange.call( that, i, showHide );
    			}
    		} );
    		
    		return nButton;
    	},
    I commented "start here" to begin the function and the check should occur just inside of it.

    Any help would be greatly appreciated.

    Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Not a specific solution but, an example of what you 'could' do:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('input[type=checkbox]').click(function(){
    		var count = $('input[type=checkbox]:checked').size();
    		$('#count').text(count);
    		if(count > 3){
    			$(this).prop('checked', false);
    			alert('You can only check 3 ;)');
    		}
    	});
    });
    </script>
    </head>
    
    <body>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    
    <div id="count"></div>
    </body>
    </html>
    http://jsfiddle.net/WhNNw/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    interestingly enough, I stumbled across this on a page I was tweaking today:

    Code:
    function amenErrorCheck(o_checkbox){
    	s_checkboxname=o_checkbox.name;
    	a_checkbox=eval("o_checkbox.form."+s_checkboxname);
    	x=0;for(i=0;i<a_checkbox.length;i++){
    		if(a_checkbox[i].checked){
    			x++;
    		}
    	}
    	for(i=0;i<a_checkbox.length;i++){
    		a_checkbox[i].disabled=(x>=3&&!a_checkbox[i].checked)? true ; false;
    	}
    }
    
    ...
    
    <input type="checkbox" id="hotelPreferencesHEALTH_SPA" onclick="amenErrorCheck(this)" value="HEALTH_SPA" name="hotelPreferences">
    Does close to what you want and what I posted previously but, it adds 'disabled' to the input instead.

    Probably nothing you need but found it a coincidence that I stumbled across that during work a couple hours after writing my first response.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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