Develop Reference

Only one checkbox is checked at the time [duplicate]

So i have a div thats auto generated and inside are 3 check boxes with different id's & names and by default none of them are checked!! If one happens to get checked then i need the other two unchecked!!
So only one can be checked at a time ...
So all unchecked or only one checked!
<div class="configoptions">
<table class="configtable" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[10]" id="co30" value="1" onclick="recalc()" type="checkbox">green</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[9]" id="co27" value="1" onclick="recalc()" type="checkbox">blue</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[11]" id="co31" value="1" onclick="recalc()" type="checkbox">white</label>
</td>
</tr>
</tbody>
</table>
</div>
Here is what i used to uncheck all divs on page ready.. since initially i need them unchecked.. that works great... now i need to make it so only one is check at a time if it is checked! Can someone gimme a hand,? Thx in advance!
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});

Use the prop function to change the checked property of checkbox and radio buttons
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Demo: Fiddle

I had a similar issue and solved it like so (using part of Arun P Johny's answer - I wanted to share for those of you who might come across this as well.)
(function($checkbox,options){
$($checkbox).on('change', function() {
$("input[type='checkbox']").not(this).prop('checked', false);
});
});

Event click radio button JQuery in Sharepoint 2013

I want to hide a Sharepoint field based on radio button value. When i put my code, this doesn't work (the event on click doesn't trigger). If i don't put the code with the event, when i open my element the script works perfectly.
This is my code:
<p>
<script src="/sites/contsvil/jQuery/jquery-1.5.js">
</script><script type="text/javascript">
$(document).ready(function() {
$("input[name$='Richiesta 1']").click(function(){
var radio_value = $(this).val();
alert(radio_value);
});
var selectedValue = $("input[#name=Richiesta 1]:checked");
//alert(selectedValue.val())
if(selectedValue.val() == "No") {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").hide();
}else {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").show();
}
});
</script></p>
Could you help me?
Thank you very much.
Regards,
Francesco

Selecting radio buttons isn't as easy as other types on inputs on SharePoint. The following chunk of code gets all the radio buttons on a SharePoint New / Edit page and prints the label to the console.
$(":radio").each(function() {
var radioId = $(this).attr("id");
var lblText = $("label[for=\""+radioId+"\"]").text();
console.log(lblText);
});
Here is an example of attaching a click event to each radio button:
$(":radio").each(function() {
$(this).click(function() {
console.log($(this).attr("id"));
});
});
This should get you close enough to move forward. For others who wish to jump in, here is the rendered HTML for a radio input on SharePoint (ugly!):
<table cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" checked="checked"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00">Enter Choice #1</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01">Enter Choice #2</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #3"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02">Enter Choice #3</label></span>
</td>
</tr>
</tbody>
</table>

Here you go:
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
// do something});
"tdApproved" is the ID of the Radio button
For more information, read this article - Accessing Radio Buttons using JQuery in SharePoint

How to disable tbody

I have a tbody inside which there are href/input type text/ etc
I have a code to get all elements of tbody but how to disable it.
My tbody
<tbody id="FamilyHistory_3">
<tr>
<td class="tablecell">
<a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
<img style="border-style: none" src="../images/v10/arrow_doc.png">
</a> test
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td></td>
<td class="tablecell">
<input type="checkbox" value="Yes" name="10627_316098">Yes
<input type="checkbox" checked="" value="No" name="10627_316098">No
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="2px"></td>
</tr>
</tbody>
Below is my code to get the content of tbody
function save(inputID,category){
var content= document.querySelectorAll('#tbodyID');
for(var i=0; i<content.length; i++){
// how to disable all the elements inside it
}
}

JSFiddle
document.querySelector('#tbodyID input').disabled = true;
You don't need jQuery for this.
For more than one:
JSFiddle
var l = document.querySelectorAll('#tbodyID input');
for (i = 0;i<l.length;i++)
{
l[i].disabled = true;
}

There's no need to loop, jquery can deal with groups of elements just using selectors.
Use the Jquery selectors and the prop function to add disabled="disabled" to each one.
You can also select multiple items using a comma separated list
$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);
disabling an a tag will not prevent it from being clicked though. May be better to hide() these.
$('#tbodyID a').hide();

You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:
$('#tbodyID').find('a, input').prop('disabled', true);
Explanation
$('#tbodyID') : Select the element with id tbodyID
find('a, input') : Find all the a and input elements inside it
prop('disabled', true) : Set the disabled property of each element returned by the previous command

Based on your answer finally I accomplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.
Disable input
$('[id='+inputID+']').find('input').attr('disabled', true);
id of tbody
Disable click but clickable hand will be there but no request will be submitted to server
$('[id='+inputID+']').attr('onclick','').unbind('click');
id of anchor tag
Thanks,Pise

How do I check multiple checkboxes with jquery without giving each an id?

I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this without that though.
All of my checkboxes are in a similar grouping. I have them grouped in a consistant way.
I have my work on a fiddle here.
Here is my code
window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
var $row = $(this);
if ($row.children('td:first').find('input:checkbox').prop('checked')) {
$(this).find('td.imageBox').each(function (index) {
var $imageBox = $(this);
if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
++(totals[index]);
}
});
}
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});
}
My problem is with the onCheckForm function.
Thank you.

Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.
Lets start off with a very simple table with a checkbox column:
<table>
<thead>
<tr>
<th scope='col' id='toggler'>
<input type='checkbox' id='toggleAll'>
<label for='toggleAll'>Select all</label>
</th>
<th scope='col'>A column</th>
</tr>
</thead>
<tbody>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
</tbody>
</table>
Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).
I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.
Here is some JavaScript code:
$('#toggleAll').change(function () {
$('td[headers~="toggler"] > input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
We are binding a function to the change event to the checkbox in the header.
The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.
The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").
Our basic functionality is done here.
We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.
The state of the header checkbox should be:
Unchecked if 0 are checked
Interdetermine if (0, n) are checked
Checked if n are checked
Where n indicates all the checkboxes.
To do this, we bind a function to the change event of each of the boxes in the table rows:
$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
var allChecked = true, noneChecked = true;
var headerCheckbox = $('#toggleAll');
$('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
if(domElement.checked) {
// at least one is checked
noneChecked = false;
} else {
// at least one is unchecked
allChecked = false;
}
});
if(allChecked) {
headerCheckbox.prop('checked', true);
headerCheckbox.prop('indeterminate', false);
} else if (noneChecked) {
headerCheckbox.prop('checked', false);
headerCheckbox.prop('indeterminate', false);
} else {
headerCheckbox.prop('indeterminate', true);
}
});
I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.
See the jsFiddle demo.
Hope this helps, I sure learned quite a bit while answering the question!

See this fiddle for a cleaner way:
http://jsfiddle.net/W75dy/19/
<td class="field">
<form class="fieldCheck">
<input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
</form> Programs
</td>
$('#Row1Chk').on('change', function(event) {
$('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

Dynamically changing ToolTipDialog content

My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the "content" dynamically. Any help will be appreciated:
HTML:
<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>
JavaScript:
function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}

I believe the preferred way to change the value of a dojo widget programatically is to use the .set() method. ie:
this.myTooltipDialog.set("content", newContent);
Rather than:
this.myTooltip.content = newContent;

It looks like you never reset the content of your tooltipDialog. You create it once, but once it's created (new dijit.TooltipDialog({...})) it remains static.
I don't know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:
tooltipDialog.content = infoText;
This is just a guess, but if Dojo's API is simple enough, that might do the trick.
If not, you might have to remove your if (!tooltipDialog) { check.

If your content is not too complicate, I suggestion you create a new TooltipDialog every call and clear it when blur, like
var dlgDiv = dojo.create("div");
var dlg = new dijit.TooltipDialog({
content: dlgDiv,
onBlur: function () {
popup.close(this);
this.destroyRecursive();
}
});
// you can create any content within dlgDiv at here dynamicly
dojo.popup.open({
around: yourArondNode ,
orient: ["below", "before", "after", "above"],
popup: dlg
});
dlg.focus();