Develop Reference

How to make radio button works two task?

I made a form with two radio buttons, two textboxes and when one radio button is clicked one textbox is enable and the other one will be disable. But how to make radio button checked at the beginning before the radio button is clicked ?
Here is my code that will enable a textbox when radio button is clicked:
<input onclick="document.getElementById('agree_ad').disabled = false; document.getElementById('agree_bs').disabled = true;" type="radio" name="type1">
<input name="Agreement_ad" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_ad" />
<input onclick="document.getElementById('agree_ad').disabled = true; document.getElementById('agree_bs').disabled = false;" type="radio" name="type1" value="customurl1">
<input name="Agreement_bs" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_bs" />
What should I do to make first radio button clicked and textbox id="agree_bs" disable by default before click event is triggered.

Apply the HTML attributes checked and disabled accordingly within your markup:
<input type="radio" name="foo" checked /> <!-- this is checked -->
<input type="radio" name="foo" /> <!-- this isn't checked -->
<br>
<input type="text" disabled /> <!-- this is disabled -->
<input type="text" /> <!-- this isn't disabled -->

You do not need fancy JavaScript to do this: simply add checked to the radio button and disabled to the second text box:
<input checked onclick="document.getElementById('agree_ad').disabled = false; document.getElementById('agree_bs').disabled = true;" type="radio" name="type1">
<input name="Agreement_ad" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_ad" />
<input onclick="document.getElementById('agree_ad').disabled = true; document.getElementById('agree_bs').disabled = false;" type="radio" name="type1" value="customurl1">
<input disabled name="Agreement_bs" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_bs" />
JSFiddle

JavaScript functions messing up my Radio Button displays

I created a form which contains two Radio Buttons.
Each radio button displays a separate form, when Clicked.
When a button is un-clicked, the form disappears from view (it is not shown)
I also added a second JavaScript Function, which disables the "SUBMIT" button, if none of the radio buttons are clicked.
The program works fine..........except I have the following problems :
(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable
(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.
Here is the first JS function (for "hiding" the forms under each radio buttons)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
And the second function, for disabling the SUBMIT button :
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
And here is the form :
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
What am I missing?
UPDATE
I have solved the RADIO BUTTON problem.
Now, I need to fix the second problem, with the JS function : fCheck ()
It is not working.
I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK.
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>

You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>

Is it possible disable a single radio button in jquery?

Is it possible to disable a single radio button in a group using jquery?
<div id="divAddNewPayrollItemWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Do you want to set up a payroll item to track wages, annual salary, commissions or bonuses?<br />
<input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br />
<input type="radio" name="rblWages" value="Annual" />Annual Salary<br />
<input type="radio" name="rblWages" value="Commission" />Commission<br />
<input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br />
<input type="button" value="Back" disabled="disabled" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" />
</div>
<div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Is this item for regular, overtime, sick or vacation pay?<br />
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
<input type="button" value="Back" onclick="" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" />
</div>
What I am trying to accomplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.

This should do it. Essentially, use jQuery to find an input with name of "rblHourlyWages" and value of "Overtime" and disable it.
$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />

What you want to do is establish a relationship between what radio button disables another. I would use an array, but that's a whole other pie.
What you can do is something on the lines of checking the radio group and using an if statement.
Array.prototype.forEach.call(document.querySelectorAll("[type='radio']"), function(x) {
x.addEventListener("click", function() {
if (x.value === "Annual") { //or any other field
document.querySelector("['OTHER_RELATED_FIELD']").disabled = true;
}
});
});
jQuery way:
$("[type='radio']").on("click", function() {
if (this.value === "Annual") $("[name='rblHourlyWages'][value='Overtime']").prop("disabled", true);
});
Note that you'll have to reset all radio buttons to enabled before each click function is run so that you can change the radio button and the option will be re-enabled.

Something like this should work. It allows for user to change radio again and reenable the other one
$('[name=rblWages]').change(function(){
var isAnnual = this.value == 'Annual';
$('[name=rblHourlyWages][value=Overtime]').prop('disabled', isAnnual);
});
DEMO

Select one checkbox row only in datatables

I want to be able to select only 1 checkbox at a time in Datatables.
In the example below, multiple rows can be selected. How can I go about only allowing one row to be selected at a time?
http://datatables.net/examples/api/form.html

You could use Radio buttons instead of checkboxes.
Example:
<input type="radio" name="fieldName" value="check1" />
<input type="radio" name="fieldName" value="check2" />
<input type="radio" name="fieldName" value="check3" />
<input type="radio" name="fieldName" value="check4" />
The "name" attribute is what groups the radio buttons together, the "value" attribute is what will differentiate them.

How to select first row of the first table in an html page using jQuery?
Selects one row in a given table.
You could use jQuery to achieve it.

You should use the radio button,
<form action="path/to/form_submit_script.php" method="get">
<input type="radio" name="red" value="Red" /> Red<br />
<input type="radio" name="blue" value="Blue" /> Blue<br />
<input type="radio" name="green" value="Green" /> Green<br />
<input type="submit" value="Submit">
</form>
Here is the working example jsfiddle example

var _MainDataTable = $('#dataTable').DataTable();
...
$("#dataTable").on('click', 'tr', function () {
if (_MainDataTable.$(".selected").length > 1) {
_MainDataTable.$(".selected").removeClass('selected');
$(this).addClass("selected");
}
});

How do I get the ID or reference of the listview row I am clicking a checkbox in?

I have an ASP.NET 2.0 ListView control (aka:parent) and configured inside this ListView I have another ListView (aka:child). For each row the parent has there is potentially a child ListView control which can have 1-3 rows. Each row has two checkboxes (a select checkbox and a deny checkbox).
I need to process these checkboxes in JavaScript so that if one select is chosen on any of the rows all other select checkboxes are unchecked AND the deny checkbox for that row only is unchecked. The rows which were NOT selected CAN have the deny checkboxes checked.
What is the best approach to this?

I did my best to understand how the markup would be from your description, but basically I built multiple divs containing a set of checkbox inputs (ignore the poor markup).
<div>
<form>
<label>Yes</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
<label>No</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
<label>Maybe</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
</form>
</div>
<div>
<form>
<label>Yes</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
<label>No</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
<label>Maybe</label>
<input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
</form>
</div>
From here I started by using jQuery (very easy to use but up to you to figure out how to set up).
$('input').change(function(){
if($(this).attr('checked')) {
$(this).parent().find('input').attr('checked', false);
$(this).attr('checked', true);
}
});
This script listens for a change event on all check boxes and then runs a check based on the parent it is contained in. If this check-box is checked, un-check all the other check-boxes contained within that parent.
You can make this more specific inside your if statement or create an else if statement for other specific use cases.
if( check-box is checked and doesnt have class name ABC ) {
//do normal stuff above
} else if( specific check-box with class name of ABC is checked ) {
//do something else
}

I think You can use the MutuallyExclusiveCheckboxExtender from the AjaxControlToolkit to do what you want. Here is a rough implementation of what you have described:
<asp:ListView ID="parentListView" runat="server" ItemPlaceholderID="PlaceHolder1">
<LayoutTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblFieldSet" runat="server" Text='<%# Eval("SetName") %>' />
<br />
<asp:ListView ID="childListView" runat="server" DataSource='<%# Eval("Items") %>'
ItemPlaceholderID="PlaceHolder2">
<LayoutTemplate>
<asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<div>
<asp:Label ID="lblItemName" runat="server" Text='<%# Eval("ItemName") %>' />
<br />
<asp:CheckBox ID="cbSelect" runat="server" Text="Select" />
<asp:CheckBox ID="cbDeny" runat="server" Text="Deny" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="exclusiveCheckboxExtender" runat="server"
TargetControlID="cbSelect" Key="Select" />
</div>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
Notice the use of the extender. It will effectively only allow one "Select" checkbox to be checked at any point and time. I don't think this is exactly what you want, but you should be able to adapt it to suit your needs.