I have some radio buttons that are not initially setting css where checked = "checked".
Any suggestions what type of jquery statement I could use to apply a class on to checked input radio buttons?
I have also attached my jsfiddle
https://jsfiddle.net/2Lbbf1b4/1/
$(function() {
$('label.radio-inline input').on('change', function() {
var name = $(this).attr('name');
if (true === $(this).prop('checked')) {
$('[name=' + $(this).attr('name') + ']').parent().removeClass('radio-select');
$(this).parent().addClass('radio-select');
}
});
});
<label class="radio-inline radio-style">
<input type="radio" checked="checked" name="test1" value="1" class="radio-style">
</label>
<label class="radio-inline radio-style">
<input type="radio" name="test1" value="2">
</label>
<br>
<label class="radio-inline radio-style">
<input type="radio" checked="checked" name="test" value="1" class="radio-style">
</label>
<label class="radio-inline radio-style">
<input type="radio" name="test" value="2">
</label>
You could simplify this a bit and and use jQuery's .is() helper method to check for the checked state of the input and compare it against it's siblings with a same name:
$(function() {
$('label.radio-inline input').on('change', function() {
if ($(this).is(':checked')) {
$('input[name="' + $(this).prop('name') +'"]').not($(this)).parent().removeClass('radio-select');
$(this).parent().addClass('radio-select');
}
});
});
Updated jsFiddle
You need to set the class on initialization using:
$('label.radio-inline input[type=radio]:checked').parent().addClass('radio-select');
Check the fiddle: https://jsfiddle.net/2Lbbf1b4/4/
Related
I have some radio buttons to filter data on my webpage that are working absolutely fine for me but i am failed to perform check on that radio button...
<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'>
<label for="radio1">bank manager</label><br><br>
<input id="radio2" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=ceo'>
<label for="radio2">ceo</label><br><br>
<input id="radio3" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=company-head'>
<label for="radio3">company head</label>
I use jquery to open and perform check on radio button click.
jquery:
$(document).ready(function() {
$('input[type=radio]').click(function() {
window.location=$(this).attr('data-href');
});
// parse the url:
var scat = window.location.search.match(/scat=(\w+)/)[1];
if (typeof scat !== 'undefined') {
// update the correct radio button:
$('input[value="' + scat + '"]').prop("checked", true);
}
});
On using above query if i click on "ceo" radio button, It works for me absolutely fine i.e. it filters content for me and performs check also...
on the other hand if i click on bank manager or company head. It only filters content ..it dosen't perform check...Any help ??
Thanks in advance...
Note: data-href includes url having "-" in bank manager and company head and in label field both bank manager and company head are without "-".
You can put the & (You have incorrect notation used in URL i.e. &&) value as an data attribute as follows,
You have currently as ,
<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'>
<label for="radio1">bank manager</label><br><br>
Add data-scat attribute to fetch scat value and also to be able to get clicked based on value,
<input id="radio1" type="radio" name="scat" value="bank-manager" data-scat="bank-manager" data-href='vlist.php?cat=xyz'>
<label for="radio1">bank manager</label><br><br>
And in jQuery you should access it as follows and append in your URL,
$(document).ready(function() {
$('input[type=radio]').click(function() {
window.location=$(this).data('href')+"&scat="+$(this).data('scat');
});
// parse the url:
var hrefLink = window.location.search;
// update the correct radio button:
$('input[value=' + hrefLink.substring(hrefLink.indexOf("scat")+5) + ']').prop("checked", true);
// } Commenting an extra closed bracket
});
Your regex need to be modified to fetch -, also need to change the selector to attribute ends with selector
var search = "?cat=xyz&scat=bank-manager"; //replace with window.location.search
var scat = search.match(/scat=([\w-]+)/);
if (scat && scat[1]) {
// update the correct radio button:
$('input[data-href$=' + scat[1] + ']').prop("checked", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'>
<label for="radio1">bank manager</label>
<br>
<br>
<input id="radio2" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=ceo'>
<label for="radio2">ceo</label>
<br>
<br>
<input id="radio3" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=company-head'>
<label for="radio3">company head</label>
You have not specify the correct value to your radio input tags and you are using value in jQuery selector.Just add the right value to it and it will work fine.
It should be
<input id="radio1" type="radio" name="scat" value="bank-manager" data-href='vlist.php?cat=xyz&&subcat=bank-manager'>
insted of
<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&subcat=bank-manager'>
$(document).ready(function() {
$('input[type=radio]').click(function() {
window.location = $(this).attr('data-href');
});
// parse the url:
var search = "vlist.php?cat=xyz&subcat=company-head";
// uncomment this line and comment below one
// var scat = window.location.search.match(/bcat=([\w-]+)/)[1];
var scat = search.match(/bcat=([\w-]+)/)[1];
if (typeof scat !== 'undefined') {
// update the correct radio button:
$('input[value="' + scat + '"]').prop("checked", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="scat" value="bank-manager" data-href='vlist.php?cat=xyz&&subcat=bank-manager'>
<label for="radio1">bank manager</label>
<br>
<br>
<input id="radio2" type="radio" name="scat" value="ceo" data-href='vlist.php?cat=xyz&&subcat=ceo'>
<label for="radio2">ceo</label>
<br>
<br>
<input id="radio3" type="radio" name="scat" value="company-head" data-href='vlist.php?cat=xyz&&subcat=company-head'>
<label for="radio3">company head</label>
I have a form with with two fields one is radio button and second one is checkbox. I want to make checkbox unchecked(If checked) and readonly when radio button value is No. My code is working for unchecked functionality but readonly does not work.Please help me
This is my code:
Html :
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">
Jquery code :
$(document).ready(function() {
$('input[name="data[User][email_status]"]').change (function(){
//console.log($(this).val());
if ($(this).val() == 'no') {
$('input[name="data[User][no_alerts]"]').attr({
'checked' : false,
});
}
});
});
Thanks
Use the disabled property to make the input readonly
$('input[value="no"]:checked').next().prop("disabled", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">
or a more general approach
$('input[value="no"]:checked').parent().find('input[type="checkbox"]').prop("disabled", true);
$('input[name="data[User][no_alerts]"]').attr({
'disabled' : true,
});
You may like this code snippet:
$(function() {
var chk = $('input[name="data[User][no_alerts]"]');//got check-box
$('input[name="data[User][email_status]"]').on('change', function(e) {
chk.prop('disabled', false); //enable first
if ('no' == this.value) {
chk.prop({
'disabled': true,
'checked': false
});
}
});
$('input[name="data[User][email_status]"]:checked').trigger('change');//fire code on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">
this can also be used
$('input[name="data[User][email_status]"]').change (function(){
//console.log($(this).val());
if ($(this).val() == 'no') {
$('input[name="data[User][no_alerts]"]').attr({
'checked' : false,
'disabled':"disabled",
});
}
});
I have to use group of checkboxes in my project.
This is how my HTML look like:
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="1"> hairColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="2"> hairColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="3"> hairColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="4" class="any"> any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="1"> eyeColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="2"> eyeColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="3"> eyeColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="4" class="any"> any
</label>
Using this checkboxes, users can select their preferred selection. But if they select the checkbox text with "any" I need to uncheck all other selection already made within a group. And also if they check that checkbox other chechboxes should not be check.
This is how I tried it using Jquery.
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + $(this).attr("name") + "].any").prop("checked", false);
}
}
});
It's working for me. But my problem is when I change name value to array type like hairColor[] then my code is not working.
I like AmmarCSE's answer, I have upvoted it, but I believe there is certainly room for improvement. You might have other characters in your name attribute and you might have more instances of a character. As a result, I believe a simple function should solve the issue, like this:
function escapeSpecialChars(input) {
return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
and then you apply it, like this:
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
var escapedSelector = escapeSpecialChars($(this).attr("name"));
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + escapedSelector + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + escapedSelector + "].any").prop("checked", false);
}
}
});
Working fiddle.
Since your name attributes contain [], you either need to escape them or switch your single/double quote usage like
$('[name="' + $(this).attr("name") + '"].any')
$("body").on("change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$('.checkbox-inline > input[type=checkbox][name="' + $(this).attr("name") + '"]:not(.any)').prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) { //User checked another checkbox
//Any checkbox is unchecked
$('[name="' + $(this).attr("name") + '"].any').prop("checked", false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="1">hairColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="2">hairColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="3">hairColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="4" class="any">any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="1">eyeColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="2">eyeColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="3">eyeColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="4" class="any">any
</label>
See jQuery selector for inputs with square brackets in the name attribute
Below is the my html code:
<input type="checkbox" id="multiOptions" />IsForMultioptions
<input type="radio" value="1" name="option">option1
<input type="radio" value="2" name="option">option2
If I select checkbox i.e. multiOptions then all radio buttons should be convert into checkboxes.
and If I uncheck the checkbox i.e. multiOptions then all checkboxes should convert in radio buttons.
thanks in advance.
You'll need to actually remove and recreate the elements, because IE doesn't let you change the type of an input after it's created.
jQuery makes this fairly easy with replaceWith:
$("selector for the input to change").replaceWith('<input type="checkbox">');
So for instance:
$('input[type="radio"][name="option"]').each(function() {
$(this).replaceWith('<input type="checkbox" name="option" value="' + this.value + '">');
});
Or if the values may contain characters requiring entities:
$('input[type="radio"][name="option"]').each(function() {
var rep = $('<input type="checkbox" name="option">');
rep.attr("value", this.value);
$(this).replaceWith(rep);
});
Instead of replacing the elements you can have two groups of which one is hidden depending on the checkbox:
HTML
<input type="checkbox" id="multiOptions">IsForMultioptions</input>
<div id="radios">
<input type="radio" value="1" name="option">option1</input>
<input type="radio" value="2" name="option">option2</input>
</div>
<div id="checkboxes">
<input type="checkbox" value="1" name="option">option1</input>
<input type="checkbox" value="2" name="option">option2</input>
</div>
jQuery
$(document).ready(function() {
$('#checkboxes').hide();
$('#multiOptions').on('click', function() {
if ($(this).is(':checked')) {
$('#radios').hide();
$('#checkboxes').show();
}
else {
$('#radios').show();
$('#checkboxes').hide();
}
});
});
jsFiddle example.
<form>
<label for="1">Text 1</label>
<input type="checkbox" name="1" value="something1" id="1"><br>
<label for="2">Text 2</label>
<input type="checkbox" name="2" value="something2" id="2"><br>
<label for="3">Text 3</label>
<input type="checkbox" name="3" value="something3" id="3"><br>
<label for="4">Text 4</label>
<input type="checkbox" name="4" value="something4" id="4">
</form>
Those are the checkboxes , I have tried to search all over the internet and didn't find anything.
I want to allow the user to check id 3 and 4 BUT if he checks 1 , then 2 is not available to check, or if he checks 2 then 1 is not available to check.
And to the unavailable to add a class .. named ..
grade-out{ color: #DDD;}
Hope u understand the problem. Thanks in Advance !!
I would add data-groupid attribute to your checkboxes to identify which group they belong to. And then add a click handler to checkboxes belonging to group, which would disable all other checkboxes in the same group when checked and enable them when unchecked..
Assumming your markup is consistent and labels are always predecessors of respective checkboxes, you can easily target them using the prev() method.
$('input:checkbox[data-group]').click(function() {
var groupid = $(this).data('group');
var checked = $(this).is(':checked');
if(checked) {
$('input:checkbox[data-group=' + groupid + ']').not($(this))
.attr('disabled', 'disabled')
.prev().addClass('grade-out');
} else {
$('input:checkbox[data-group=' + groupid + ']')
.removeAttr('disabled')
.prev().removeClass('grade-out');
}
});
DEMO
I would assign an attribute data-disable to disable certain elements and check onchange.
This is how I would do it:
<form>
<label for="1">Text 1</label>
<input type="checkbox" name="1" value="something1" id="1" data-disable="2,3"><br>
<label for="2">Text 2</label>
<input type="checkbox" name="2" value="something2" id="2" data-disable="1"><br>
<label for="3">Text 3</label>
<input type="checkbox" name="3" value="something3" id="3"><br>
<label for="4">Text 4</label>
<input type="checkbox" name="4" value="something4" id="4">
</form>
and script:
$('input:checkbox').on('change', function(){
var toUncheck = $(this).attr('data-disable');
var self = $(this);
$.each(toUncheck.split(','), function(el, val){
if(self.attr('checked') == 'checked'){
$('#'+val).attr('disabled', 'disabled');
} else {
$('#'+val).removeAttr('disabled');
}
});
});
JSFiddle Demo
You could use radio form inputs. Anyway, if it's a must to use checkboxes then you could use some javascript (with jQuery, for example)
$('#1,#2').click(function(){
var $this = $(this);
var theOtherId = $this.attr('id') == 1 ? 2 : 1;
var theOtherOne = $('#'+theOtherId);
if( $this.is(':checked') ) theOtherOne.attr('checked',false);
});
It this what you're looking for?
Re-worked example: demo fiddle
$('#1,#2').click(function(){
var $this = $(this);
var theOtherId = $this.attr('id') == 1 ? 2 : 1;
var theOtherOne = $('#'+theOtherId);
if( $this.is(':checked') ) theOtherOne.attr('disabled',true);
else theOtherOne.attr('disabled',false);
});
Although there are more complex and flexible solutions above if you wish a solid but clear usage sample look at this. Using id's make things easier.
http://jsfiddle.net/erdincgc/uMhbs/1/
HTML (added class and id) ;
<form>
<label for="1">Text 1</label>
<input class="checks" type="checkbox" id="option1" name="option1" value="something1" id="1"><br>
<label for="2">Text 2</label>
<input class="checks" type="checkbox" id="option2" name="option2" value="something2" id="2"><br>
<label for="3">Text 3</label>
<input class="checks" type="checkbox" id="option3" name="option3" value="something3" id="3"><br>
<label for="4">Text 4</label>
<input class="checks" type="checkbox" id="option4" name="option4" value="something4" id="4">
</form>
And JS
$('.checks').click(function(){
op1 = $('#option1') ;
op2 = $('#option2') ;
this_id = $(this).attr("id") ;
this_state = $(this).attr("checked");
if(this_id =="option1"){
if( this_state == "checked" ){
op2.attr("disabled",true);
}
else {
op2.attr("disabled",false);
}
op2.prev().toggleClass('disabled');
}
if(this_id=="option2"){
if( this_state=="checked" )
op1.attr("disabled",true);
else {
op1.attr("disabled",false);
}
op1.prev().toggleClass('disabled');
}
});
Use $("#element_id").hide(); for disabling the check box
Use $("#element_id").attr("checked", true); to check if the check box is selected
Use $("#element_id").addclass(); to add class to an element so in short search for jQuery selectors and you will find the solutions
Vist for more information http://api.jquery.com/category/selectors/ I hope I help take care