The way the CheckBoxList works makes it impossible to use (maybe I am wrong on this) the ASP.Net Ajax extender control. So my next thought was to write up some javascript to only allow one item to be selected out of all the checkboxs. Since the CheckBoxList controls wraps all the ListItem's in a table (I think it has an inline way to render as well) and that it all has auto generated ID's it makes it hard to write a little custom javascript method to attach to each checkboxes click event.
Then comes jQuery to the rescue! I have been using jQuery recently, and found that its selector helps out ASP.Net development immensly. Because we have such little control of how the HTML renders using the default ASP.Net controls, it makes it hard to apply styles and client side javascript. Below is a small method I modified from someone else to go through and make only one of the checkbox's be able to be in the checked state at a time.
/* This is used to make a list of checkboxes to becomeTake the following snippet of code from an ASPX page, and assume its being bound to a datasource that will populate its list items automatically.
mutually exclusive */
(function($) {
$.fn.makeCheckboxesMutuallyExclusive = function() {
//list of checkboxes
var checkBoxes = this.filter('input:checkbox');
//add a click function to each one to make sure one is checked
checkBoxes.click(function() {
checkedState = $(this).attr('checked');
//loop on all checkboxes and uncheck them
$(checkBoxes).each(function() {
$(this).attr('checked', false);
});
$(this).attr('checked', checkedState);
});
}
})(jQuery);
<asp:checkboxlist runat="server" id="chkExample" repeatdirection="Horizontal"></asp:CheckBoxList>
We can then write some javascript to make all the checkboxes in this list mutually exclusive. It looks like this.
$('#<%=chkExample.ClientID %> td input').makeCheckboxesMutuallyExclusive();This should select all the input controls inside the table that the CheckBoxList wraps its contents in. It then calls the function above with those items to make them mutally exclusive.
1 comment:
Here is another method
add the following script to your page
function XOR_Click(id, name) {
///actual check box clicked////
var cb_checked = document.getElementById(id);
////name of spans contaning the checkboxes///
name = cb_checked.parentNode.getAttribute("name");
////collection of spans containing checkboxes/
var CBoxes = document.getElementsByName(name);
var cbox;
var idx = 0;
/////deselect all check boxes
for (idx = 1; idx < CBoxes.length; idx++) {
cbox = CBoxes[idx];
cbox.childNodes[0].checked = false;
}
////select the clicked checkbox
cb_checked.checked = true;
}
In the code behind set the id and name of each list item of your CheckBoxList control during the page load event.
Example
during pageload call this function
protected void Int_XOR_CBox()
{
int idx = 0; ;
foreach (ListItem li in XOR_CBox1.Items)
{
li.Attributes["id"] = "XOR_CBoxSpan_" + idx.ToString();
li.Attributes["name"] = "XOR_CBox1";
li.Attributes["onclick"] = "XOR_Click(id,name)";
idx++;
}
}
XOR_CBox1 is the id of the asp:CheckBoxList control on the aspx page.
bjhamltn
Post a Comment