I'm trying to write privilige group checkbox. Something like
this
So far I made page where I put empty control made by me which looks like this
<fieldset>
<legend><asp:CheckBox ID="GroupName" runat="server" TextAlign="Left" text="test" onclick="checkAll()"/></legend>
<span> <!--class="filterTableSpan"-->
<asp:Table ID="priviligeTable" runat="server" CssClass="groupTable">
</asp:Table>
</span>
</fieldset>
then I fill priviligeTable
CheckBox privilCheck = new CheckBox();
privilCheck.ID = this.ID + "_" + privName; //ID of group
TableCell tc = new TableCell();
tc.ID = this.ID + "_tc" + privName;
tc.Controls.Add(privilCheck);
TableRow tr = new TableRow();
tr.ID = this.ID + "_tr" + privName;
tr.Cells.Add(tc);
this.priviligeTable.Rows.Add(tr);
and now I'd like to make javascript for select all, unselect and mid state to Privilige Group Name checkbox, but I do not know how to access dynamic generated checkboxes. Furthermore I'm a newbie with javascript. I would be pleased if someone could show me a way to solve this problem or rather a direction which I should head to solve by my efforts this problem.
Do these roles come from a list in a database? If so, my instinct would be to avoid the and use instead. The Gridview gives you more built-in functionality including templates that enable you to create all the checkboxes on the go.
However, what you are doing could work too.
I suggest using jQuery - it will make your life a lot easier and ensure your code works across all browsers.
Then you need something like this. This will toggle all the checkboxes on or off.
function checkAll() {
// Find all the checkboxes in the table
var $checkboxes = $('table.groupTable input[type=checkbox]');
if($(this).is(':checked')){
// Check them
$checkboxes.attr("checked","checked");
} else {
// Uncheck them
$checkboxes.removeAttr("checked",);
}
}
I think that should do it. Not sure what you mean by 'mid-state' though. They are either checked or not.
Don't forget that on postback you need to recreate all the checkboxes to be able to read their contents.
Related
I'm using some javascript to disable the checkboxes in a checkboxlist like so:
var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");
if (form1.secTB.value == 0) {
checkBoxes[0].disabled = true;
This code works fine, but when the page renders in IE, the text attribute for the checkbox is rendered as a label, and so only the checkbox seems to grey out, instead of the checkbox AND the text.
If I simply set
Enabled = false
in the .aspx codebehind, it greys out everything, but makes it impossible (with my current method) to re-enable the CB and un-grey the label.
Could anyone tell me how to work around this and help me understand why it's doing this?
Add the disabled attribute to the InputAttributes of the CheckBox instead:
CheckBox1.InputAttributes.Add("disabled", "disabled");
http://geekswithblogs.net/jonasb/archive/2006/07/27/86498.aspx
The problem is that an <asp:checkbox /> control gets rendered out like this:
<span><input type='checkbox'></span>
The real problem comes when you have a checkbox like this: <asp:CheckBox Enabled="false"/>.
This gets rendered out like this:
<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>
If you look at the HTML output from a checkbox control you'll see there is an associated <label for="checkbox_client_id">Text</label> - this is why setting the checkbox as disabled doesn't grey-out the text.
When viewing the page from IE, ASP.NET wraps the <input> and associated <label> with <span disabled="disabled">. IE will disable all elements inside the span, which is why it disabled the checkbox and label.
However, since a span is not a form element, most other browsers follow the W3C rules and ignore the "disabled" attribute it. Disabling a span around the checkbox will only work in IE.
The easiest solution I can think of is to replicate this behavior manually. Wrap the checkbox with a span then, when enabling/disabling the checkbox use CSS to style the span and get the desired effect to work on all browsers.
var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");
if (form1.secTB.value == 0) {
checkBoxes[0].disabled = true;
checkBoxes[0].parentNode.class = "disabled";
}
P.S. Sorry if I sound snarky - IE always annoys me with it's endless "intricacies"
a nice member here helped me set up a multiple checkbox example that stores the data to be shown in a div. However, when I try to do multiple of these, they interlap with each other and show the same data in the divs even when I changed variables.
I set up a simple example here:
http://jsfiddle.net/pufamuf/vrpMc/4/
Thank you for your time everyone :)
That's because you're using the same selector in both event handlers: input[type="checkbox"]:checked
This will select all checked checkbox inputs in the page.
You should instead use input[name="car[]"]:checked and input[name="phone[]"]:checked
to select only the inputs with the given name, each time.
In both your functions, you're selecting all of the selected checkboxes. My fix (and someone else might have a better one) would be to add unique ids to the ul's surrounding the li's.
html:
<ul id='electronics'>
<li><input type="checkbox" name="phone[]" value="Nokia" />Nokia</li>
That way you can modify your $('#submit').click handler to something like this:
$('#submit').click(
function()
{
var htmls = "";
$('ul#electronics>li>input[type="checkbox"]:checked').each(
function()
{
htmls += $(this).val() + " ";
}
);
$('.here').html(htmls);
}
);
Check out http://api.jquery.com/child-selector/, http://api.jquery.com/id-selector/ for more info.
Basically, without this or a similar change, there's nothing distinguishing your list of car brands from your list of electronics brands, and your click handlers both consider all of the checked checkboxes.
I want to disable the radiobutton the second time it is clicked..I want to put some code in the head..that when a radiobutton is clicked the second time,, it isnt marked anymore..
I want to check and uncheck the radiobutton with each click.
Note: I generate 20 radiobuttons dynamically
Take into account that it is a Radiobutton that is run on the server:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.aspx
UPDATE: This is the only event that the RadioButton (asp WebControl run at="server") has:
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
var rad = (CheckBox)sender;
if (rad.Checked)
{
rad.Checked = false;
}
}
I can uncheck it after each post back..but unless a post back doesnt happen, i cant select and deselect it.. Thats the problem!! :(
I think you should keep with the standard use of RadioButtons, by saying this - use CheckBoxes instead, and clear all checkboxes if a different one is clicked...so when a checkbox is clicked the second time the standard uncheck will occur.
if i get you right then
all u need is a flag attribute of how many times u have clicked on the radio button and each time u click the radio the attribute increased by 1 and check the attribute every click if its 2nd time then disable the radiobutton
so you need to generate ur radiobuttons like this
<input type='radio' onclick='radioClick(this);' how_many_clicked='0' id='whatever id u need' name='whatever name u need' />
and create ur function in the head like the following
function radioClick(e) {
var flag = e.getAttribute('how_many_clicked');
var times = Number(flag);
times += 1;
e.setAttribute('how_many_clicked', times.toString())
if (times > 1) {
e.checked = false;
e.setAttribute('how_many_clicked', "0");
}
else {
e.checked = true;
}
}
Id create an empty array. For every radiobutton you create, add its ID to the array as the key and set its value to 0. This will be the count for the specific button. Whenever a radiobutton is clicked, check the buttons ID against the array, if its less than 2, increment it. If not, disable the current button.
EDIT : didn't realize you were checking if it was already checked, thoguht it was the number of times checked.
$("#id").is(":checked")
Should suffice
Another note ...if all you're doing is disabling an element from being accessed by the user, you should handle this event on the client side. You'll be using unnecessary server callback for functionality easily achievable via javascript. Use jquery click event handlers which can be generic enough for you not to have to use identifiers, making the job that much easier.
Cheers
I have an ASP.NET TextBox ID="txtDate" in my usercontrol. It has ValidationGroup="MyUC" set. Now my UC is inside a Repeater Control. So there will be multiple instances of the same textbox.
I am able to get all textboxes like: $("[id$='_txtDate']");
Each of the txtDate will have a separate ValidationGroup assigned to it, dynamically.
So I want to get a textbox based on the id + ValidationGroup using jQuery / javascript.
How can it be done? Any guidance really appreciated.
Edited based on Josiah's Reply and the way I found:
Sorry, my scenario is kind of complicated to include entire code. In short the textboxes are attached to jquery datepicker and the code below runs when a date is selected. The same handler is attached to multiple textboxes. Here is what I have:
var valgrp="MyGroup"; /*this mygroup is dynamic but keeping static for e.g.*/
var txtdate1 = $("[id$='txtDate']").filter(function(){if(this.Validators!=null){return this.Validators[0].validationGroup == valgrp;}});
var txtdate2 = $("[id$='txtDate']").filter(function(){return this.validationGroup == valgrp;});
alert("date1- " + txtdate1.val()); /*this returns date selected from datepicker*/
alert("date2 " + txtdate2.val()); /*this returns empty*/
Depending on the date I want to do something else. So txtdate1 is currently working for me where I don't have to add class to my textbox. I was playing with the txtdate2 which isn't behaving how I was expecting and so I had to post this question.
Here is a sample test to see this.validationGroup not returned:
$(function () {
$("#btntest").click(function () {
$("[id$='txtDate']").each(function () {
alert(this.validationGroup);//returns undefined
alert(this.Validators[0].validationGroup); //returns "test"
});
});
});
<input id="btntest" type="button" value="button" />
<asp:TextBox ID="txtDate" runat="server" ValidationGroup="test"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Text="*" ErrorMessage="Required." ControlToValidate="txtDate" ValidationGroup="test"></asp:RequiredFieldValidator>
While Josiah's solution didn't work but his idea of attaching class to textbox could have been a potential solution. Since it didn't exactly fit my needs I would answer my own question. Here is the solution I came up with:
var valgrp="MyGroup"; /*this mygroup is dynamic but keeping static for e.g.*/
var txtdate1 = $("[id$='txtDate']").filter(function(){if(this.Validators!=null){return this.Validators[0].validationGroup == valgrp;}});
The above returns me the textbox I am looking for. The key is
this.Validators[0].validationGroup
It gets the validationGroup of the first validator control attached to the textbox (this).
From a few searches, the validation group is stored as a property on the Form Element.
So you can add a class selector like so:
$("[id$='_txtDate']").each(function(){
var group = this.validationGroup,
$this = $(this);
if(!$this.hasClass('validationgroup'))
$this.addClass('validationgroup ' + group);
});
Of course if you have a repeater you will need to run this code each time an row is repeated. But now you can select fields by validation group like this:
$('.validationgroup.[group name]')
I don't use jQuery, but I'd think it would be:
$("#txtDate[ValidationGroup='MyUc']")
since jQuery's selectors are based on CSS. That works with document.querySelector, unless having more that one element with the same id is causing problems.
I would like to pick some of your brains on this matter...
I've got a large form where there are a lot of multiple selection choices. Some are radio groups and yet others are "select all that apply" checkbox groups.
I'm trying to figure out the best way to translate each of these selections within my XML tree to send to the SQL server.
For radio groups, that's easy... one is selected: option = id #
But for checkboxes, this is a little different... I'd like to stick to sending 1 or 0 for selected or not selected. But checkbox dont have a value and so I have to check to see whether or not it's selected: true or false/yes or no.
What do you think would be the best way to convey whether or checkbox within a group of checkboxes has been selected within the XML tree?
One way (and the simplest) would be to send only those checked and the server will assume the others are not checked. The other way would be to iterate over your form elements, select the checkboxes and see if they are checked or not, one by one. Something like:
var checkboxes = []; // assoc array of all checkboxes
function formValidate(form)
{
var list = form.getElementsByTagName('input')
for (var i in list)
{
var elem = list[i];
if (elem.type == 'checkbox')
checkboxes[elem.name] = elem.checked;
}
return true; // assuming this is an onSubmit event
}
and in your HTML:
<form onSubmit="return formValidate(this)" ...