We Keep Coding

Turn CheckBoxes into CheckButtons

I am trying to turn These checkboxes:
Into These Checkboxes(I will refer to these as CheckButtons):
Directly below is the code of the current Check Boxes:
#foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<text> </text>
#department.Value <input name="department_chkbox" type="checkbox" value="#department.Key" />
if (i > 5)
{
<text><br></text>
i = 0;
}
}
The HTML of the desired ones is below but it does not tell me much:
<td id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</td>
Does anyone know what is being called to make the checkboxes turn into "checkbuttons" I wrote the check box code, but I do not have access to the check button code. Im assuming that this is something that is done in eitehr Javascript or Jquery. Also there is no class for the

Going off of the desired HTML, it's relatively simple solution using only CSS. Of course, you'll want to tweak it to get it looking exactly the way you want.
#checkboxcontainer {
display: flex;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: block;
min-width: 100px;
border: solid #999;
border-width: 1px 1px 1px 0;
background: #eee;
margin: 0;
padding: 2px 0;
text-align: center;
}
input[type=checkbox]:checked + label {
background: #ccc;
}
input[type=checkbox] + label:first-of-type {
border-radius: 3px 0 0 3px;
border-left-width: 1px;
}
input[type=checkbox] + label:last-of-type {
border-radius: 0 3px 3px 0;
}
<div id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</div>
And to generate this HTML using Razor you'd have something like this:
<div id="checkboxcontainer">
#foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<input name="department_chkbox" type="checkbox" value="#department.Key" id="department_chkbox#(i)" /><label for="department_chkbox#(i)">#department.Value</label>
}
</div>

Change image in specified div when checkboxes are selected

I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection.
The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When nothing is selected I want it to display image F.
I was also hoping to use Bootstrap styling to make them look like buttons not checkboxes.
<div>
<form name="test1">
<div data-toggle="buttons" class="btn-group itemcontent">
<label class="btn btn-default"><input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" />Selector1</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" />Selector2</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" />Selector3</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" />Selector4</label>
</form>
</div>
I was thinking of using a script like this:
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_Base_Model.png'>";
break;
case 2:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_DW.png'>";
break;
For my image display div:<div class="col-6" id="imagetest"></div>
But I'm honestly not sure where to go from here. I'm VERY new to JavaScript.
Thank you!
UPDATE
With a friends help we were able to come up with a test, but I can't get the code to work correctly...
<!DOCTYPE html>
<html>
<head>
<title>Test </title>
<script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" />
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</head>
<body>
<div id="form1">
<form name="test">
<span><input type="checkbox" id="chk1" onchange="check_value()" data-val="A"><label for="chk1">A</label></span>
<span><input type="checkbox" id="chk2" onchange="check_value()" data-val="B"><label for="chk2">B</label></span>
<span><input type="checkbox" id="chk3" onchange="check_value()" data-val="C"><label for="chk3">C</label></span>
<span><input type="checkbox" id="chk4" onchange="check_value()" data-val="D"><label for="chk4">D</label></span>
</form>
</div>
<div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;">
</div>
</body>
<script type="text/javascript">
function check_value()
{
var myVal = '';
$("input[type=checkbox]").each(function()
{
if ($(this).is(':checked'))
{
myVal += $(this).data('val');
}
});
alert(myVal);
var myDiv = $('#imagetest');
if (myVal == 'A')
{
myDiv.css('background-color', 'blue');
}
else if (myVal == 'B')
{
myDiv.css('background-color', 'green');
}
else if (myVal == 'C')
{
myDiv.css('background-color', 'grey');
}
else if (myVal == 'D')
{
myDiv.css('background-color', 'pink');
}
else if (myVal == 'AB')
{
myDiv.css('background-color', 'orange');
}
else if (myVal == 'AC')
{
myDiv.css('background-color', 'yellow');
}
else if (myVal == 'AD')
{
myDiv.css('background-color', 'black');
}
else if (myVal == 'BC')
{
myDiv.css('background-color', 'lightblue');
}
else if (myVal == 'BD')
{
myDiv.css('background-color', 'lightgreen');
}
else if (myVal == 'ABC')
{
myDiv.css('background-color', 'brown');
}
else if (myVal == 'ABD')
{
myDiv.css('background-color', 'Cyan');
}
else
{
myDiv.css('background-color', 'white');
}
}
</script>
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</html>
What am I doing wrong here..?

Ok, I got it you want to change image in radio-button selection. If you want to select multiple radio-button you must use another type, checkbox.
Vanilla JavaScript
This is a vanilla, pure javascript, code:
function changeImage(elem) {
var imageUrl = elem.getAttribute('image');
document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();
<div id="form1">
<form name='test'>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Simple explanation:
You give every radio button an attribute with the link (relative or absolute is your choice) and then in the function call grep the value for that attribute for the clicked element and set it as image element source.
jQuery
If you want to use jQuery to accomplish it this is a sample:
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
$('#imgview').attr('src', imageUrl);
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<span><input type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Edit:
Multiple selection with multiple image view
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
var fieldValue = $(this).val();
var idImage = 'image_' + fieldValue;
if ($(this).is(':checked')) {
$('#imagetest').append('<img src="' + imageUrl + '" id="' + idImage + '">');
} else {
$('#'+idImage).remove();
}
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<label><input type="checkbox" image="https://placebear.com/300/200" name="field" value="one">BASE</label>
<label><input type="checkbox" image="https://placebear.com/300/300" name="field" value="two">Deep Well </label>
<label><input type="checkbox" image="https://placebear.com/200/200" name="field" value="three">Extension </label>
<label><input type="checkbox" image="https://placebear.com/200/300" name="field" value="four">Treadmill</label>
<label><input type="checkbox" image="https://placebear.com/300/250" name="field" value="five">Stairs </label>
</form>
</div>
<div id="imagetest">
</div>

Change form inputs based on selected values

I have 3 fields: publishers in a radio-button, cities name in a drop-down list and images of news paper.
How it is possible when I select the radio button the city drop-down changes accordingly and when we select a particular city the image of news paper comes according to the city selected?
the code i am using is the code is working in first time when we select another publisher code doesnot work for images :
<html>
<title>index</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var listA =[{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Banglore', value:'Banglore'}, {name:'Chennai', value:'Chennai'}, {name:'Delhi', value:'Delhi'}, {name:'Hyderabad', value:'hyderabad'}, {name:'Jaipur', value:'Jaipur'}, {name:'Kochi', value:'Kochi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Lucknow', value:'Lucknow'}, {name:'Mumbai', value:'Mumbai'}, {name:'NaviMumbai', value:'NaviMumbai'}, {name:'Pune', value:'Pune'}, {name:'Thane', value:'Thane'}];
var listB = [{name:'Banglore', value:'Banglore'}, {name:'Delhi', value:'Delhi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Mumbai', value:'Mumbai'}];
var listC = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Mumbai', value:'Mumbai'}, {name:'Banglore', value:'Banglore'}, {name:'Pune', value:'Pune'}];
var listD = [{name:'Ahmednagar', value:'Ahmednagar'}, {name:'Aurangabad', value:'Aurangabad'}, {name:'Jalgaon', value:'Jalgaon'}, {name:'Kolhapur', value:'Kolhapur'}, {name:'Mumbai', value:'Mumbai'}, {name:'Nagpur', value:'Nagpur'}, {name:'Nashik', value:'Nashik'}, {name:'Pune', value:'Pune'}];
var listE = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listF = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listG = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Nav Gujrat Et Wealth', value:'Nav_Gujrat_Et_Wealth'}];
var listH = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
$(document).ready( function() {
$("input[name='chk']").on('change',function() {
if($(this).is(':checked') && $(this).val() == 'toi')
{
$('#describe').empty()
$.each(listA, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'tet')
{
$('#describe').empty()
$.each(listB, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mirror')
{
$('#describe').empty()
$.each(listC, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mht')
{
$('#describe').empty()
$.each(listD, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'nbt')
{
$('#describe').empty()
$.each(listE, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'eis')
{
$('#describe').empty()
$.each(listF, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'ngs')
{
$('#describe').empty()
$.each(listG, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'vke')
{
$('#describe').empty()
$.each(listH, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else
{
}
});
});
</script>
<style type="text/css">
body{ margin:0; padding:0;}
.header{ width:100%; border-bottom:4px solid #0099ff;}
.headerin{ width: 710px; margin:0 auto; }
.divOuter {
background: none repeat scroll 0 0 #f9f9f9;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 5px 5px #ddd;
margin: 28px auto;
padding:50px 20px;
width: 710px;
}
.clr{ clear:both;}
.left_feilds{ float:left; width:275px;}
.left_right{ float:left;}
.forms{ float:left; margin:128px 0 0 0;}
#describe{ padding:3px 10px; width:150px; float:left;}
.logo{ float:left;}
.submit{ }
.submit input{ background:#d12f2f;
border: 0 none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 5px; width:80px;margin-top:30px; margin-left:30px; }
.imgs{ margin:180px 0 0 0px; float:left;}
.footer{ width:100%; border-top:3px solid #0099FF;}
.footerin{ width:780px; margin:0 auto; text-align:center;}
.footerin a{ text-decoration:none; color:#666666; font-size:14px;}
img{
float: right;
height: 150px;
margin: 10px -120px;
width: 120px;}
</style>
<script language='JavaScript' type='text/javascript'>
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank /change_images_by_dropdown/images/Chrysanthemum.jpg'>";
break;
case 2:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Desert.jpg'>";
break;
case 3:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Hydrangeas.jpg'>";
break;
}
}
</script>
</head>
<body>
<div class="header">
<div class="headerin">
<div class="logo"><img src="images/big_logo.png" /></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="divOuter">
<div class="left_feilds">
<p><input type="radio" id="class" name="chk" value="toi" checked>The Times of India<br/></p>
<p><input type="radio" id="Club" name="chk" value="tet">The Economic Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="mirror">Mirror<br/></p>
<p><input type="radio" id="Club" name="chk" value="mht">Maharashtra Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="nbt">NavBharat Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="eis">Ei Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="ngs">NavGujarat Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="vke">VijayKarnataka ePaper<br/></p>
<form action="insert_image.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file" ></p>
<p><div class="submit"><input type="submit" value="Submit" name="Submit"></div></p>
</div>
<div class="left_right">
<div class="forms">
<select id="describe">
<option name="field" value="1" onclick='check_value(1)'>Ahmedabad</option>
<option name="field" value="2" onclick='check_value(2)'>Banglore</option>
<option name="field" value="3" onclick='check_value(3)'>Chennai</option>
<option name="field" value="4" onclick='check_value(4)'>Delhi</option>
<option name="field" value="5" onclick='check_value(5)'>Hyderabad</option>
<option name="field" value="6" onclick='check_value(6)'>Jaipur</option>
<option name="field" value="7" onclick='check_value(7)'>Kochi</option>
<option name="field" value="8" onclick='check_value(8)'>Kolkata</option>
<option name="field" value="9" onclick='check_value(9)'>Lucknow</option>
<option name="field" value="10" onclick='check_value(10)'>Mumbai</option>
<option name="field" value="11" onclick='check_value(11)'>NaviMumbai</option>
<option name="field" value="12" onclick='check_value(12)'>Pune</option>
<option name="field" value="13" onclick='check_value(13)'>Thane</option>
</select>
<div class="clr"></div>
<div class="imgs">
<img src="images/knowMore.png" alt="" />
</div>
</div>
<div class="clr"></div>
<div id='imagedest'></div>
</form>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footerin">
<p>About Us | Advertise with Us | Terms of Use | Privacy Policy </p>
<p>Copyright © 2014 • All rights reserved. </p>
</div>
</div>
</body>
</html>

first add the onchange event on to checkbox.
test the condition checkbox is checked or not
if checkbox is checked then get the value of checkbox and change cities name accrodingly
same thing for cities name to change images
Someone could help you better if you provide the code whatever you have tried
here is a sample code you can get basic idea from
<input name="check" type="radio" onclick="changeCities(this,1)" value="1">having value 1
<input name="check" type="radio" onclick="changeCities(this, 2)" value="2">having value 2
<input name="check" type="radio" onclick="changeCities(this, 3)" value="3">having value 3
<br>
<br><br>
<select id="cities" onchange="getPhosts(this.value);">
<option value="1">india</option>
<option value="2">australia</option>
<option value="3">america</option>
</select>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
function changeCities(thisObj, publisher) {
var publisher = publisher || $(thisObj).val();
// here get all the cities based on publishers
// i am writing here some static data
var cities = [{'id':'1', 'name':'dubai'}, {'id':'2', 'name':'arab'}];
var options = '';
for (var i = 0; i < cities.length; i++) {
options += "<option value='"+cities[i].id+"'>" + cities[i].name + "</option>";
}
$('#cities').html(options);
}
function getPhosts(city){
//same process like changeCities() for images here
}
</script>

How to limit checkbox selection to one using jquery or javascript

How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />

$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example

If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.

Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>

Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/

How can I only select one radio button?

I am creating a review-control and using radiobutton for grade selection. I wrote some simple js to add a diffrent class when a radiobutton is checked.
The problem is that you can check every radio button, I want the user only to check one value. I writing this in javascript, but jQuery is welcome or a smartare solution.
Demo : http://jsfiddle.net/cbqt8/5/
HTML:
<div class="reviews">
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="1" name="review[rating]" /> Bad
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="2" name="review[rating]" /> Its okey
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="3" name="review[rating]" /> Great
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="4" name="review[rating]" /> Awesome
</label>
<label class="input-check">
<input onchange="change_state(this)" type="radio" value="5" name="review[rating]" />Super
</label>
</div>
JavaScript:
function change_state(obj) {
if (obj.checked) {
//if radiobutton is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else {
//else remove it
obj.parentNode.classList.remove("checked");
}
}
CSS:
/*reviews box*/
.reviews{
padding: 25px;
margin:0;
}
/*this is the style of an radio "button"*/
.input-check {
display: inline-block;
height:20px;
padding:5px 8px;
background:green;
width:90px;
color:white;
text-align: center;
}
/* This is the style for a radio "button" */
.input-check.checked{
background:red;
color:black;
font-weight:bold;
}
/*Hide the radiobutton*/
.input-check input {
display:none;
}

You got to remove the checked class for previously checked item.
jsFiddle: http://jsfiddle.net/P8jB8/
function change_state(obj) {
if (obj.checked) {
var checkedNodes = getElementsByClassName(document, "checked");
for (var i=0;i<checkedNodes.length;i++) {
checkedNodes[i].classList.remove("checked");
}
//if radiobutton is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else {
//else remove it
obj.parentNode.classList.remove("checked");
}
}
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
​