Allow selection of only 1 checkbox - javascript

I want allow selection of only 1 checkbox.
I am using the following script:
$(document).ready(function(){
$('#valores input').on('change', function() {
$('#valores input').not(this).prop('checked', false);
});
});
And HTML:
<div id="valores">
<div><input type="checkbox" name="valor" id="50reais" class="css-checkbox"/><label for="50reais" class="css-label radGroup1">R$ 50,00</label></div>
<div><input type="checkbox" name="valor" id="100reais" class="css-checkbox"/><label for="100reais" class="css-label radGroup1">R$ 100,00</label></div>
<div><input type="checkbox" name="valor" id="150reais" class="css-checkbox"/><label for="150reais" class="css-label radGroup1">R$ 150,00</label></div>
<div><input type="checkbox" name="valor" id="200reais" class="css-checkbox"/><label for="200reais" class="css-label radGroup1">R$ 200,00</label></div>
<div><input type="checkbox" name="valor" id="250reais" class="css-checkbox"/><label for="250reais" class="css-label radGroup1">R$ 250,00</label></div>
<div><input type="checkbox" name="valor" id="outroValor" class="css-checkbox"/><label for="outroValor" class="css-label radGroup1">Outro Valor</label></div>
</div>
Only works while the page is loading. After ready stops working.
Solved! There was an unnecessary script that I had left in the code and was causing this problem.
Thanks for all!

Sounds like your page may be updating dynamically after load.
Change it to use a delegated event handler, attached to a non-changing ancestor element:
$(document).ready(function(){
$(document).on('change', '#valores input', function() {
$('#valores input').not(this).prop('checked', false);
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/hrahs1gu/
Also view your page DOM (e.g. Chrome F12 DOM inspector) after loading, so see if the elements are what you expect.

HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app2.js"></script>
</head>
<body>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
</label>
</div>
</body>
</html>
Javascript code
$(document).ready(function(){
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
console.log($box);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
});

Related

Jquery auto trigger event on checkbox unchecks the control

Here is my html and javascript, want to auto check on click of button and oncheck want to trigger some more actions. Tried with 'click' and 'change' event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#4').on('click', function(){
$('#1').prop('checked', true).trigger('click');
$('#2').prop('checked', true).trigger('click');
});
$('#1').on('click', function(){
if($('#1').is(':checked')){
$('#3').prop('disabled','disabled');
}
else{
$('#3').prop('disabled','');
}
});
});
</script>
</head>
<body>
<label>
<input id="1" type="checkbox" value="">Yes</label><br><br>
<label>
<input id="2" type="checkbox" value="">NO</label><br><br>
<label>
<input id="3" type="text" value="Hello World">Yes</label><br><br>
<input id="4" type="button" value="Submit"/><br><br>
</body>
</html>
Something like this should get you started.
var onYesChecked = function() {
if($('#1').is(':checked')){
$('#3').prop('disabled',true);
} else{
$('#3').prop('disabled',false);
}
};
var onNoChecked = function() {
// your NoChecked logic here
};
$(document).ready(function(){
$('#4').on('click', function(){
// `.prop('checked', true)` will check the checkbox.
// Triggering click will immediately uncheck the checkbox
// (simulating a user click).
// $('#1').prop('checked', true).trigger('click');
// $('#2').prop('checked', true).trigger('click');
$('#1').prop('checked', true);
$('#2').prop('checked', true);
onYesChecked();
onNoChecked();
});
$('#1').on('click', onYesChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="1" type="checkbox" value="">Yes
</label>
<br><br>
<label>
<input id="2" type="checkbox" value="">NO
</label>
<br><br>
<label>
<input id="3" type="text" value="Hello World">Yes
</label>
<br><br>
<input id="4" type="button" value="Submit"/>

How to toggle icheck checkboxes

I have 2 checkboxes (Yes / No ) with the plugin icheck (http://icheck.fronteed.com), and I want when Yes is checked No will be unchecked, and vice-versa.
<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>
Javascript
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green'
});
Add event listeners and listen for the change event. Then in the callback that runs when the event fires, change the property opposing checkbox to the opposite of the event value.
var firstCheckbox = $('#myicheckboxid1');
var secondCheckbox = $('#myicheckboxid2');
firstCheckbox.prop('checked', true); // default
// you could also use iChecked to do this but it's fine to set with `prop`
// firstCheckbox.iCheck('check');
firstCheckbox.on('change', function(event) {
secondCheckbox.prop('checked', !event.target.checked);
});
secondCheckbox.on('change', function(event) {
firstCheckbox.prop('checked', !event.target.checked);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>
But seriously, you should consider a radio buttons :)

Why isn't my javascript/jquery code working as expected for checkboxes

I have a code where I expect my checkboxes to be selected and disabled. When I click Zero, all checkboxes should be highlighted, all checkboxes except zeroth checkbox should be disabled. Similarly for one, two and three radio buttons. This does not seem to happen consistently. I am trying it on chrome browser version 48.0.2564.116. Also, the behavior is horrible on Firefox. Can someone please let me know what I am doing wrong?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name=radio_group]").prop("checked", false);
$("input[type=radio]").click( function( e ){
var whats_selected = $("input[name=radio_group]:checked").val()
$("input[type=checkbox]").attr('checked',false );
//disable all other checkboxes
for(i=0; i < 4; i++ ){
var elem = $("input[type=checkbox][name*=checkbox"+i+"]");
elem.click();
if( i != whats_selected ){
elem.prop("disabled", true);
}else{
elem.removeAttr("disabled");
}
}
});
});
</script>
</head>
<body>
<h1>Checkbox play</h1>
<h3>My 4 Radio Buttons</h3>
<input type="radio" name='radio_group' value=0>Zero<br>
<input type="radio" name='radio_group' value=1>One<br>
<input type="radio" name='radio_group' value=2>Two<br>
<input type="radio" name='radio_group' value=3>Three<br>
<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three<br>
</body>
</html>
I think this should do the trick (if I get your question correctly)
$("input[type=radio]").click(function(e) {
var whats_selected = $(this).val();
// check an disable all checboxes
$("input[type=checkbox]")
.attr('checked', true)
.prop('disabled', true);
// enable the targetted checkbox
$('#chkbox' + whats_selected)
.prop('disabled', false);
});
Have a look at the demo: https://jsfiddle.net/a5og0soL/
Here is another way to do it, matching the index of the radio/checkbox pair:
jsFiddle Demo
var ndx;
$(document).ready(function() {
$("input[type=radio]").click(function() {
ndx = $("input[type=radio]").index(this);
$("input[type=checkbox]").attr('checked', true).prop('disabled', true);
$("input[type=checkbox]").eq(ndx).prop('disabled',false);
});
}); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>My 4 Radio Buttons</h3>
<input type="radio" name='radio_group' value=0>Zero
<br>
<input type="radio" name='radio_group' value=1>One
<br>
<input type="radio" name='radio_group' value=2>Two
<br>
<input type="radio" name='radio_group' value=3>Three
<br>
<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero
<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One
<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two
<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three
<br>

Running javascript when document loads

I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});

jQuery get the "event invoking" element

My problem is that when the checkbox below is clicked - the check function is called to check/uncheck all the checkboxes. But they have to change relatively to the invoking checkbox (the one with the "onchange" event).
The checkbox HTML declaration:
<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">
Sample JavaScript Code:
$.fn.check = function() {
$(this).each(function(){
$(this).attr('checked', checked);
});
}
And my question is: How can I get the DOM object corresponding to the "check all" checkbox?
Edit: Pass the this object of the checkAll to the function.
DEMO
<input type="checkbox"
onchange="$('input[type=checkbox][rel=users]').check(this);" />
Note the this is passed as .check(this)
And in the JS:
$(document).ready(function() {
$.fn.check = function(orgEl) {
$(this).each(function() {
$(this).attr('checked', orgEl.checked);
});
}
});
Old Post -
Bind the checkAll checkbox to an handler and call the fxn from inside.. See below,
HTML
<input type="checkbox" id="checkAll" >
JS
$(document).ready (function () {
$('#checkAll').click (function () {
//this inside is checkAll checkbox object.
$('input[type=checkbox][rel=users]').check();
});
});
Since you're binding this to the "checkall" checkbox, you have access to itself inline. So you can pass it to the jQuery .check() function you made and use it there. Look at this:
(please excuse my changes to your selecting, you can obviously use what you had before...but I would suggest using :checkbox instead of input[type=checkbox])
<html>
<head>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
$.fn.check = function (obj) {
$(this).each(function (){
this.checked = obj.checked;
});
}
</script>
</head>
<body>
<input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<body>
View on JSFIDDLE.
I'm a fan of using HTML5 data attributes for stuff like this. With the following DOM structure, you can define your target checkboxes with a data-target attribute on the triggering checkbox. The target should be a valid jQuery selector string.
HTML:
<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">
<label for="checkUsers">Users:</label>
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<br><br>
<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">
<label for="checkPlaces">Places:</label>
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
Then you setup the plugin to use the target you defined to trigger the checks/unchecks based on the triggering checkbox's checked attribute.
Plugin:
(function( $ ){
$.fn.check = function() {
// "this" is a jQuery object of the checkbox that was clicked.
var target = this.data("target");
$(target).attr("checked", this[0].checked);
return this; //maintain chainability
};
})( jQuery );
The real benefit of this method is that it allows you to only have to manage one event handler declaration by attaching the event to a class instead of an id.
Event Handler Declaration:
$(function(){
$(".checkAll").click(function(){
$(this).check();
});
});

Categories