why wont javascript "checkbox.disable" grey out associated label in ASP.NET? - javascript

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"

Related

Adding checkbox onchange attribute from code behind for IE8

I have a gridView with a couple of checkboxes. In rowDataBound event, I am checking certain values and binding rows. There are two checkboxes in the grid. If one is checked, the other checkbox should be disabled, and vice versa.
Here is the code which works fine for all the browsers and IE versions except for IE8
CheckBox Active = (CheckBox) e.Row.FindControl("chkActive");
CheckBox InActive = (CheckBox) e.Row.FindControl("chkInActive");
if (Active.Checked)
InActive.InputAttributes.Add("disabled", "true");
if (InActive.Checked)
Active.InputAttributes.Add("disabled", "true");
Active.Attributes.Add("onchange", String.Format("setCheck('{0}','{1}');", Active.ClientID, InActive.ClientID));
InActive.Attributes.Add("onchange", String.Format("setCheck('{0}','{1}');", Active.ClientID, InActive.ClientID));
This is a content page, so I can not add !DOCTYPE to this page.To handle in IE8, I added below code but still not working.
InActive.Enabled = !Active.Checked;
Active.Enabled = !InActive.Checked;
Javascript function is like this,
function setCheck(active, inactive) {
var c1 = $get(active);
var c2 = $get(inactive);
c1.disabled = c2.checked;
c2.disabled = c1.checked;
}
Can anyone suggest what needs to be done to add attributes like this in IE8?!

Can't post back JavaScript changes to ASP.NET ListBox option properties/attributes

I'm trying to use JavaScript to change properties or attributes of an ASP.NET ListBox's options, but the only changes that the server sees on postback (asp:Button click) are the selected state of the options. I'm ultimately trying to convey that the SS code should ignore certain selected options, and I was hoping I could use something simple like noting its hidden state, setting the option's disabled property, or adding an attribute. The control, and some failed JS lines:
<asp:ListBox ID="lstFacilities" runat="server" SelectionMode="Multiple" Height="200" />
//lbxFacs returned by document.getElementById
lbxFacs.options[f].style.display = 'none';
lbxFacs.options[f].disabled = true;
lbxFacs.options[f].setAttribute('disabled', 'disabled');
I hide them from view after selecting a filter from another control, and that works from the UI standpoint, but the server seems to have no way of knowing they're hidden. I try to disable them, but the Enabled property is always true. Adding attributes is useless too; the Attributes collection is always empty. Server-side snippet:
bool allSelected = lstFacilities.Items[0].Selected; //"All Facilities", only want visible options
foreach (ListItem option in lstFacilities.Items)
{
var optAtts = option.Attributes; //Always empty
if ((allSelected || option.Selected) && option.Value != "All" && option.Enabled)
selectedFacsIDs += "," + facID; //Always gets here when only "All" selected and some options invisible
}
I can't even get changes to the options' text or values to come in SS. I've also tried the jQuery equivalents. Is there any way to rectify this, or will I have to invoke my proven backup plan of having the JS set the value of a hidden input for the server to read which options are valid? Thanks...

Hide a button until check box is checked, without ID

I need to hide a button until a check box is clicked, however I am stepping into someone elses code who used tag libraries that did not define ID in the button tag. Here is what I have:
The button code:
<html:button name="Next" value="BTN.NEXT" styleClass="button" localeCd="<%= localeCd %>" onClick='Submit("Next")'/>
The checkbox code:
<input type="checkbox" name="fedCheck" onclick="checkFed(this, 'myNext')" value="y" />
The Javascript Code
function checkFed(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;
}
I can get this to work in a seperate page but the page that it is on does not allow for the button to have an ID so it crashes every time. Any suggestions?
There would be better ways of doing this, listening for the click event, etc... but, to simply modify your code see this jsFiddle (note: this assumes this is the only element named "Next"):
function checkFed(ele, name) {
x = document.getElementsByName(name)[0];
x.disabled = !x.disabled
}
And change the onclick="checkFed(this, 'myNext')" to:
onclick="checkFed(this, 'Next')"
And add disabled="true" to the button so that it's initial state is disabled
...also note that this doesn't actually hide it like the title asks, it disables it, like the content of the question seems to ask.
Instead of finding the button using document.getElementById, use document.querySelector.
For example, if you have a single button on the page with "Next" as the value of its name attribute:
document.querySelector('button[name="Next"]')

ASP.NET Server Controls - Show Hide Textbox based on Dropdown selection

What is the best way to show/hide a textbox or an entire div section based on a users selection from a dropdown? I don't believe its possible with server controls, so I would have to use regular client side HTML controls, correct? Thanks for any input. Would jQuery be the best option for this?
Based on the drop down selection, I want to be able to display the following Div, and by default hide the Div. Thoughts?:
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"> </asp:TextBox>
You can do it with server controls the same as simple html controls. You only need to correct set the rendered client IDs of the control. Here is an example: (see the notes on the code for what I do)
function TriggerChange(me)
{
// get the drop down control
var cTheDropDown = jQuery("#<%=ddlControl.ClientID%>");
// find the value of the selected one
var SelValue = jQuery('option:selected', cTheDropDown).attr('value');
// now do what you like with it
if(SelValue == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
a shorter version of
function TriggerChange(me)
{
// get the selected value from the drop down list
// and base on it, show or hide your div
if(jQuery("#<%=ddlControl.ClientID%>").val() == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
And on control you add the trigger as:
<asp:DropDownList ID="ddlControl" runat="server" onchange="TriggerChange(this);">

Javascript label + checkbox click problem in IE, replacing a checkbox with an image

Having an issue on my form here:
http://lexusevents.sanscode.com/datawash/details/pagetwo/1a08c087bdd3f0f85359a2a2e61ca74a
Basically what you have there is a bunch of <img>'s sitting inside a label with a checkbox like this:
<label for="mybox">
<input type="checkbox" id="mybox">
<img src="">
</label>
When you click the image in firefox or chrome, the label fires the checkbox and my crafty CSS styles change the image to have some text sit on top indicating it is selected.
Now the issue is that when i'm in IE, the label click doesn't work. It won't fire the checkbox. So without fully knowing why I decided I should try to use jquery to fix it.
if ($.browser.msie) {
$('.checkbox label').bind('click', function() {
checkbx = $(this).children('input');
me = $(this);
checkbx.click();
if (checkbx.is(':checked')) me.addClass('checked');
else me.removeClass('checked');
});
$('.checkbox label').each(function() {
var c = $('input', this);
var me = $(this);
if (c.is(':checked')) me.addClass('checked');
else me.removeClass('checked');
});
}
This code has an error on the line that starts with checkbx = $(th... apparently there is a property doesn't support this method error but i can't work out why.
Can anybody help me out here?
This might due to the other input in your form:
// You are selecting here all the input tag.
checkbx = $(this).children('input');
As per your html, you also had this tag:
<input type="hidden" name="form_id" value="1a08c087bdd3f0f85359a2a2e61ca74a">
That might cause an issue in IE. You might want to change your query:
From:
checkbx = $(this).children('input');
To (Most likely like this or be more specific in the query to select only input type of checkbox):
checkbx = $(this).children(':checkbox');

Categories