We Keep Coding

How to programmatically select the next or the previous radio input in a radio group?

I am trying to programmatically emulate the behavior of leftarrrow/rightarrow in a radio button group. I know I can do this to emulate right arrow:
// currently checked input in one group
const checkedRadioInput = document.querySelector('input[name=target]:checked');
// get all inputs from that group
const allRadioInputs = [...document.querySelectorAll('input[name=target]')];
// get the next radio button in list
const selectedIndex = allRadioInputs.indexOf(checkedRadioInput);
const nextIndex = selectedIndex + 1;
// check the element
const toSetElm = allRadioInputs[nextIndex];
toSetElm.checked = true;
// trigger change event (optional)
toSetElm.dispatchEvent(new Event('change'));
However, I am curious if there's any specification guaranteeing that this is exactly how the arrow keys should work, so that my solution would work across all browsers and in all situations.
For example, does this still work correctly if the elements are visually positioned out of order using CSS. Or if one of the radio inputs is hidden via 'display' property. Or if one of the radio inputs is disabled via HTML attributes. Etc.
I was hoping there would be something like selectedIndex which I can increment/decrement directly.

Change tabindex dynamically in jquery

Imagine this simple layout ( http://jsfiddle.net/4F9cL/ ).
We have a table, for each row i have a label a textbox and a checkbox.
The first textbox has tabindex = 1 , the first checkbox has tabindex = 2, the next textbox on the second row has tabindex = 3 and so on.
What i would like to do is change the tabindex on the checkbox on the same row for the textbox that im in if the content of the textbox has changed.
For example at the moment im checking the checkbox on the row that the thebox content has been changed, i do that with the following code:
$("input:text").change(function () {
$(this).parents('tr:first').find('input:checkbox').prop('checked', 'checked');
So the scenario is the following: If the content of the textbox hasnt changed, when i tab i want the focus to change to the checkbox on the same row. If the content of the textbox HAS changed, i would like the focus to be on the next textbox on the row below INSTEAD of the checkbox on the same row.
I hope i explained it good enough for you to understand what im trying to do.
I've tried using .removeprop() and .removeattr() but that doesnt work and when next tab hits it just goes to the bottom of the page.

$("input:text").change(...);
The change event of a textbox will only be executed once the textbox loses focus. This means that when you press Tab, that function has not yet run, and you'll end up with your old tabindex target.
$("input:text").keyup(...);
$("input:text").keydown(...);
These events will fire when you either press down on (keydown), or release (keyup) a button while the textbox is focused.
Something like this should do the trick:
$("input:text").keyup(function() {
var textBox = $(this);
var textBoxIsEmpty = textBox.val().length == 0; //I assume you use this to determine which element should be the next to get focused when pressing tab.
var currentTabIndex = parseInt( textBox.attr("tabindex") );
var nextTarget = GetNextTarget(textBoxIsEmpty); //not sure how you define this. This is the item you want to be your next target when you press tab.
var nextTabIndex = currentTabIndex + 1;
nextTarget.attr("tabindex", nextTabIndex);
});
Although I am not 100% sure if changing the tabindex dynamically works in every browser.

I have tried like that and it's working fine for me.
before applying this you should clear on this you have declare you tabindex in the input properly.
jQuery("input:text").keyup(function() {
currentTabIndex = parseInt(jQuery(this).attr("tabindex") );
nextTabIndex = currentTabIndex + 1;
jQuery('input[tabindex='+nextTabIndex+']').select();
});

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

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"

Need help with javascript regarding radiobuttons

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

Dynamically enable ASP.net button in GridView based on another control in the GridView

I have a gridview with a cheackbox and a dropdown.
The checkbox, by default, is not checked.
The dropdownlist, by default, is disabled.
In the edit mode of the gridview, when the user clicks the checkbox I want the dropdown to become enabled. If I could do this client side that would be awesome, if not I want to do it server side WITHOUT having to click update and then edit again.
This is in C#
Thanks!
What I tried:
The grdiview is based off of a data source, so originally I tried basing the enabled value of the dropdown list off of the data Eval of the checkbox datavalue. However this required checking the box, clicking update and then edit for the ddl to be enabled. Then I thought maybe autopostback would all the user not to have to click update and then edit again. This did not work. However what I really want it a client side solution. I think the way it would have to work is and event on the checkbox would have to actually enable the dropdown list, I don't think the dropdown list can listen for the checkbox to be checked. However I don't know how to reference a control from another control in asp code. So maybe I would say something like OnCheckChanged = if Checked then ddl.enabled = true? But i'm not sure how to write that, and I don't know that I can force that event of the checkbox to be evaluated client side.
#Tim - I tried this:
in the rowdatabound event:
CheckBox chk = e.Row.FindControl("checkbox1") as CheckBox;
DropDownList ddl = e.Row.FindControl("dropdownlist1") as DropDownList;
chk.Attributes.Add("onclick", "document.getElementById('" + ddl.ClientID + "').enabled = this.checked;");
When I click edit this code DOES get hit so the onclick event IS getting added tot he checkbox. But when I click the checkbox the dropdown list does not become enabled.
Thanks Tim! This is the working solution.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)\
{
if ((row.RowType == DataControlRowType.DataRow) && ((row.RowState & DataControlRowState.Edit) > 0))
CheckBox chk = e.Row.FindControl("checkbox1") as CheckBox;
DropDownList ddl = e.Row.FindControl("dropdownlist1") as DropDownList;
chk.Attributes.Add("onclick", "document.getElementById('" + ddl.ClientID + "').disabled = !this.checked;");
}

Use RowDataBound to add the client-side event to your checkbox:
GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
Select Case e.Row.RowState
Case DataControlRowState.Edit
Dim chk As CheckBox = DirectCast(e.Row.FindControl("MyCheckboxID"), CheckBox)
Dim ddl As DropDownList = DirectCast(e.Row.FindControl("MyDropdownlistID"), DropDownList)
chk.Attributes.Add("onclick", "document.getElementById('" & ddl.ClientID & "').disabled = ! this.checked;")
End Select
End Sub

What have you tried so far? This should be easily accomplished with a TemplateField and a little javascript
http://msdn.microsoft.com/en-us/library/ms228046.aspx