Allow selection of only 1 checkbox
Question
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!
2 answers
solution1
0 2015-05-05 15:06:17
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 (eg Chrome F12 DOM inspector) after loading, so see if the elements are what you expect.
solution2
0 2015-05-05 15:17:42
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);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.