I downloaded the script from emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html and made a few modifications, as the source wasn't working as required (When submitting the form, all of the values were being sent to the php handler, not just the checked ones).
My working example is in this Demo.
My issue is this: how can I check a group of <lis> so that I could have a 'Select All' button?
You can do it like this:
$("#fcbklist li input:checkbox").attr("checked", true);
Or if you want a toggle on that select all box that checks when it's checked, unchecks all when it's not, do this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked", this.checked);
});
To get the effect you want with the plugin though, you'll need to fire a click on the parent as well, like this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked",this.checked).parent().click();
});
You can try a working sample here.
Related
I am using metronic admin theme for one of my project.
http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469
I have to checked or unchecked check boxes on base of data from database but problem is that i am unable to checked or unchecked a check box in metronic theme using jquery. I have tried both ways to accomplish this task using prop and attr but nothing is working for me. If I run the same code on my custom web page it's working perfectly fine.
$("#checkbox").prop("checked",true);
$("#checkbox").attr('checked',false);
$("#checkbox").attr('checked','checked');
If you are using metronic, try adding this line after the prop:
$.uniform.update();
Metronic theme uses uniform library to modify standard form element into fancy element. If you check or uncheck element using jquery, it is updated but it is not reflected on front-end. To update this action on front-end you need to update using uniform library.
$.uniform.update() restyles the element depending on updated action.
Best way for this problem add class for input checkbox when you are using in Angular Js loop.
This works perfectly:
I also use the metroic theme,but no such problems:
I think the problem maybe is your 'unchecked' and 'checked' is not matching;my meaning is:you should
var checked = $(this).is(":checked");
$.each(function() {
if (checked) {
$(this).prop("checked", true);//or $(this).attr("checked", true);
} else {
$(this).prop("checked", false);//or $(this).attr("checked", false),can't use $(this).removeAttr('checked');
}
});
if you use removeAttr,you should
$(this).attr('checked', 'checked');
$(this).removeAttr('checked');
if above all it don't work ,you can try:
$(this)[0].checked=true;// when I use ,find return array,so add [0];
$(this)[0].checked=false;
$(this).iCheck('uncheck');
or
$(this).iCheck('check');
can be found here
I have a datatable, where each row has a checkbox. I'm trying to add select-all functionality to this set of checkboxes, for which I created the following function:
function selectAll() {
$(':checkbox').each(function() {
this.checked = true;
});
}
This works to select all checkboxes which are currently visible, however, the checkboxes on other pages of the datatable are not selected. I know that there is an issue with these checkboxes in general, since to submit the form and include those checkboxes, I had to add the following function:
$('form').submit(function() {
oTable1 = $('#mytable').dataTable();
$(oTable1.fnGetHiddenNodes()).find('input:checked').appendTo(this);
});
So I suspect that in order to check these checkboxes, I will somehow have to append them to the DOM, at least temporarily, check them off, and then remove them from the DOM. Or is there something simpler that I can do?
I managed to get this work using the following:
oTable1 = $('#mytable').dataTable();
$(oTable1.fnGetNodes()).find(':checkbox').attr('checked',true);
As an alternative, you can also use
$(oTable1.fnGetFilteredNodes()).find(':checkbox').attr('checked',true);
which will apply the "select-all" only to the rows that match the current filter.
I have a form with checkboxes. When users click on label, I have custom checkbox icon that gets swapped. That works fine, but I also have disabled checkboxes in the form, and I don't wan't the click event to be triggered when you click on the disabled ones. How do I do that?
JQuery:
$('input[type=checkbox] + label').click(function() {
$(this).toggleClass('checkbox-pressed');
});
HTML:
<input type="checkbox" id="A"><label for="A">Option 1</label>
<input disabled type="checkbox" id="B"><label for="B">Option 2 - don't trigger JQ</label>
Use :not(:disabled) to select only those checkboxes that aren't disabled.
$('input[type=checkbox]:not(:disabled)').click(function() {
...
});
Documentation: :not() and :disabled
You should rather use .on(). Otherwise it won't work for checkboxes that become disabled after the page loads up initially (say, because of some user action):
$(document).on('click', 'input[type=checkbox]:not(:disabled)', function() {
...
});
You can use the :enabled selector like this:
$(':checkbox:enabled').click(function() {
// Your code here...
});
it would be easier to use :checked in jQuery
you can find more here.
not sure what is wrong with this jquery code: http://jsfiddle.net/aCABM/
I want to to grey out the dropdown menu when 'yes' is selected. When no is selected it can be selected if the user so wishes.
Select the elements by radio button name there is no need to select them individually by there ids and use prop instead of attr since you are manipulating its disabled property. Try this.
$(function(){
$("input[name='discount']").click(function() {
$("#discountselection").prop("disabled", this.value == 'Yes');
});
});
Demo
In your fiddle there were few issues.
Missed to include jQuery library
You cannot just begin your markup with td, it should be enclosed with table and tr element.
In the Js window you just have to put your js, no need to have script tags.
check updated code here
http://jsfiddle.net/ylokesh/aCABM/1/
Update code here:
http://jsfiddle.net/aCABM/6/enter link description here
You need to wrap your code in a $(document).ready() function, like so:
$(document).ready(function() {
$("#Yes").click(function() {
$("#discountselection").attr("disabled", false);
//$("#discountselection").show(); //To Show the dropdown
});
$("#No").click(function() {
$("#discountselection").attr("disabled", true);
//$("#discountselection").hide();//To hide the dropdown
});
})
Also, you didn't setup jsFiddle correctly, it required jQuery library and (document)ready()
You can use this :
$("#Yes").click(function() {
$("#discountselection").show();
});
$("#No").click(function() {
$("#discountselection").hide();
});
and remove the disable="disable".
Good-Luck !
This is just an add on to my last question. Once I deselect the radio button I need to return the background color to its original state. So the solution we came up with is:
$(document).ready(function(){
$('input:radio').change(function(){
$(this).closest('div').toggleClass('highlight');
});
});
Now I need to remove the highlight class when the radio button is deselected - any ideas?
Try this, group your radios using the name attribute and the following js should work
Demo
$('input:radio').change(function(){
$('div.highlight').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
yes, I agree with redsquare, you can see this my code demo on jsfiddle, with the div onclick select the radio.
$('table div').click(function() {
$(this).find('input:radio').prop('checked', true);
$('div.highlight_row').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
you can see the full code here, but the change is on tr class, not the div class :
JsFiddle Code Sample