Creating Custom JQueryUI Buttons for a Toolbar – Part 3

Welcome to part 3 of my JQueryUI Button Toolbar tutorial. If you missed any of the previous ones, you can click here for Part 1, or here for Part 2. Otherwise, read on.

Up to this point we’ve created a pretty simple, but good looking toolbar from just a single image using JQueryUI’s button widgets and some CSS trickery. We also looked at how using JQueryUI  we transformed basic HTML Form elements into our buttons and yet they still retained their characteristics, such as a radio button group or checkboxes. Now, the last part of this tutorial will go over how to programmatically alter these button states and groups.

Before diving in, keep in mind that Checkboxes and  Radio buttons have a “checked” state, which we need to account for. There may be times you may not only want to disable or enable these elements, but to toggle their checked state. So let’s get to it.

Disabling/Enabling Toolbar Buttons

Much of the work that’s to follow will entail using one of JQuery’s most powerful features, selectors. What they are, if you don’t know, is simply a mechanism  to quickly get to an element within your HTML, for example, getting a form button, or checkbox on the current page. I won’t go into detail about selectors, but you can go to JQuery’s site for more details on selectors

So how do we go about disabling a single button or group? Well, first we need to find it on the page, so here’s the HTML code for one of our button groups:

<div id="group01">
<button id="tb_1">Custom Button 1</button>
<button id="tb_2">Custom Button 2</button>
<button id="tb_3">Custom Button 3</button>
<button id="tb_4">Custom Button 4</button>
</div>

Say we want to disable or enable our “Custom Button 1”, we simply use a selector statement to get the button element:

$("#tb_1")

That’s it! With that statement, we just pulled a reference to the element on our page that has an id of “tb_1”, which is our “Custom Button 1”. Now, with this reference we can perform the following operations on it:

Check it’s state:

$("#tb_1").attr("disabled");

Set the button’s state:

$("#tb_1").button({disabled:true}); 
$("#tb_1").button({disabled:false}); 

When we check the state of our button object using JQuery’s attribute (attr) function we will get either get “disabled” back if it is checked or nothing. It’s then just a matter of setting this button’s “disabled” property to either true or false

So our function to disable/enable our custom-1 button is simply the following:

function toggleCustom1Button()
{
if ($("#tb_1").attr("disabled") == "disabled")
{
$("#tb_1").button({disabled:false});
}
else
{
$("#tb_1").button({disabled:true});
}
}

That’s it! Viola, your button can now be toggled on or off! But wait, there’s more!

Disabling/Enabling Toolbar Groups

What if we want to do an entire group of buttons? It’s not much harder, we just need to alter our selector a little bit to get what we want. So, let’s see what the HTML in our toolbar looks like.

<div id="toolbar">
<!-- Group01-->
<div id="group01">
<button id="tb_1">Custom Button 1</button>
<button id="tb_2">Custom Button 2</button>
<button id="tb_3">Custom Button 3</button>
<button id="tb_4">Custom Button 4</button>
|
</div>
<!-- Group02 Checkboxes -->
<div id="group02">
<input type="checkbox" id="tb_A"><label for="tb_A">Option A</label></input>
<input type="checkbox" id="tb_B" checked><label for="tb_B">Option B</label></input>
<input type="checkbox" id="tb_C"><label for="tb_C">Option C</label></input>
|
</div>
<!-- Group03 Radio Buttons-->
<div id="group03">
<input type="radio" name="radioSet" id="tb_PacMan" checked>
<label for="tb_PacMan">PacMan</label>
</input>
<input type="radio" name="radioSet" id="tb_Zoom">
<label for="tb_Zoom">PacMan</label>
</input>
<input type="radio" name="radioSet" id="tb_X">
<label for="tb_X">NO</label>
</input>
</div>
</div>

We can see that we have three groups, each within their own DIV tag. So what we want to do is get every form element within our desired DIV and either disable or enable them. Here’s how we do it:

$("#group01 :input")

That’s it, that single line will return an object that contains every for input element found within our “group01” DIV. The next thing we do is iterate through the return result and toggle them on or off. Here’s our function:

function toggleGroup01()
{
$("#group01 :input").each(function(i){
if($(this).attr("disabled") == "disabled")
{
$(this).button({disabled:false});
}
else
{
$(this).button({disabled:true});
}
});
}

So, building on what we learned when disabling a single button, we extend that into a loop by using JQuery’s .each function. We iterate through each element found and we set the button’s disabled attribute to either true or false. Notice too that we toggle the disabled attribute by checking first to see if the button is already disabled or not… No sense in enabling or disabling a button that’s already in the state we want.

Toggling Checkboxes and Radio Buttons

What about programatically checking or unchecking a Radio Button or Checkbox? Well, it’s not much harder it’s just setting the “checked” attribute on these form elements. So let’s look at the code for working with Checkboxes and Radio buttons.

Using a similar selector to our button, we can grab the checkbox or radio button from our page:

$("#tb_B")

With the object now in our grasp, we can perform the following operations on it:

Check it’s state: 

$("#tb_B").attr("checked");

Set it’s state: 

$("#tb_B").prop("checked",false);
$("#tb_B").prop("checked",true);

When we check the state using JQuery’s attribute (attr) function we will either get nothing back or “checked” if the element is checked. The prop function allows us to set a property on our checkbox or radio button object. But there’s one more thing that must be done.

After setting the property, nothing will happen to the button object. Even though the underlying form element has changed, we haven’t told the button to show the update, so before we move on we have to tell our button to “refresh”.

We simple use the following command:

$("#tb_B").button( "refresh" );

Viola! Now we’re done. What’s interesting too, is toggling a radio button will also cause the radio button group to react, so if there is already a “checked” radio button, the new “checked” button will toggle the other off. However, you need to consider that you might uncheck all your radio buttons, which will leave you with no default selected item in the radio group.

So here’s our Checkbox/Radio button function:

function toggleBchk()
{
if ($("#tb_B").attr("checked") == "checked")
{
$("#tb_B").prop("checked",false);
}
else
{
$("#tb_B").prop("checked",true);
}
$("#tb_B").button( "refresh" );
}

Be a Better Programmer

If you haven’t figured it out by now, what we’ve been doing so far is writing a function for each button to toggle… That’s awful inefficient, and can really fatten up your code, and these days, we’re not into obese code, so let’s slim it down.

First off, you’ll notice that the operations are the same for each button you’re going to want to toggle on/off. So how about we write a single function for each kind? One for buttons, one for groups and one for checkboxes/radios, then all we would need to do is pass in the name of our element!

Here’s the end result of our slimming exercise:

function toggleButton(buttonId)
{
if ($("#" + buttonId).attr("disabled") == "disabled")
{
$("#" + buttonId).button({disabled:false});
}
else
{
$("#" + buttonId).button({disabled:true});
}
}
function toggleGroup(group)
{
$('#' + group + ' :input').each(function(i){
if($(this).attr("disabled") == "disabled")
{
$(this).button({disabled:false});
}
else
{
$(this).button({disabled:true});
}
});
}
function toggleBtnChk(buttonId)
{
var elmt = $("#" + buttonId);
var btnType = elmt.get(0).type;

if (btnType == "checkbox" ||
btnType == "radio")
{
if(elmt.attr("checked") == "checked")
{
elmt.prop("checked",false);
}
else
{
elmt.prop("checked",true);
}
elmt.button( "refresh" );
}
}

So what have we done? Well, we added a javascript parameter that gets passed in. We then shoehorn that into our selector with the following statement:

$("#" + buttonId)

What’s we’re doing there is we’re making  our $(“#tb_1”) by taking the parameter and concatenating a # before the name passed in. This allows us to use this one operation for anything we’re after on the page! Then the rest is just doing what we need to the button, group or checkbox/radio. Notice in the toggleBtnChk function I actually took to checking out the type of form element we’re working with, I wanted to ensure that we’re only working with a checkbox or radio button. Now knowing this, we could take all three functions and cram them into one! But I’ll leave that for you to do. As always, the code for this tutorial is available here, and the included tutorial3.html file shows how these functions work. Thanks for reading, and I hope this was helpful.