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
Related
I'm having some trouble understanding how to turn my addClass into a cookie. I have a multi-select box that currently filters a list of products by adding an active class and then only showing products with the specified tags. If you make a selection and then click one of the products to view the product and then go back you have to reselect the previously selected options again. Below is the code used to make the selection.
tabsBlock.children('.tab').click(function() {
var tabContentClass = $(this).attr('id') + '-content';
tabsBlock.children('.active').removeClass('active');
tabsContentBlock.children('.active').removeClass('active').hide();
$(this).addClass('active');
if (tabContentClass.length) {
tabsContentBlock.children('#' + tabContentClass).addClass('active').show();
}
getTags();
});
All help is appreciated!
For a case like you describe I would would use hidden inputs. See this example:
Put checkbox values into hidden input with jQuery
Reason being, it sounds like you only need to store the values for this particular case. Storing in a cookie will require you to manage when the cookie expires which can be messy and cause undesired behaviors.
I don't know much about localStorage (as mentioned in the comment) -- that may be a viable option as well.
Thanks everyone for the help. I ended up using Astaroth's suggestion of using local storage.
$(".tag-group-label").click(function(){
localStorage.setItem('tagGroupLabelState', 'open');
});
$(document).ready(function(){
if(localStorage.getItem('tagGroupLabelState') == 'open') {
$('.tag-group-label').addClass('open').next('.tag-container').slideToggle(400, function(){
reCalcStickyElement();
});
}
});
I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.
I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.
All work on this can be done in this jsfiddle
I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.
I have tried this:
$("ul.multiselect-container").find("li").removeClass("active");
And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?
I have tried this:
$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);
It doesn't deselect the option.
Please see if you can deselect the top option of the select.
So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.
When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>
I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.
If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.
To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one
$("body").prepend("<select id=\"a-select\" multiple='multiple' >"
+ optionsText +
"</select>");
$('#a-select').multiselect({
on: {
change: function(option, checked) {
alert('sdd');
var values = [];
$('#a-select').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#a-select').multiselect('deselect', values);
}
}
});
Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.
I have redefined the method "deselect" as follows.
this.deselect = function() {
$('input[type="radio"]:checked').attr('checked', false);
$(".multiselect-selected-text").text("None selected");
}
JsFiddle Demo
Add an empty option to the top of the select element.
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 several PrimeFaces checkboxes on a page. If you click the master checkbox, all other checkboxes should be checked/unchecked. With plain HTML checkboxes this would be an easy issue. But because PrimeFaces does not show the checkbox itself, but an image, the following JavaScript code does not work:
<script type="text/javascript">
$(document).ready(function() {
var masterCheckbox = $(".ui-chkbox.master :checkbox");
var slaveCheckboxes = $(".ui-chkbox:not(.master) :checkbox");
updateMaster();
masterCheckbox.change(updateSlaves);
slaveCheckboxes.change(updateMaster);
function updateMaster() {
var allSlavesChecked = true;
slaveCheckboxes.each(function() {
if (!$(this).is(':checked')) {
allSlavesChecked = false;
}
});
masterCheckbox.attr("checked", allSlavesChecked);
}
function updateSlaves() {
var masterChecked = masterCheckbox.is(":checked");
slaveCheckboxes.each(function() {
$(this).attr("checked", masterChecked);
});
}
});
</script>
I know that I could use the PrimeFaces widgetVar to toggle the checkboxes, but I do not know how to get the PrimeFaces widget objects with JavaScript. I think RichFaces adds the component property to the DOM element, but PrimeFaces does not. Does somebody know a solution for this problem?
You were correct -- if you create your component like this:
<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>
You can access the checkbox simply by refering to its widgetVar, in this case calling the PrimeFaces client-side API to mark it as checked:
<script>
myCheckbox.check();
</script>
You could then tie the onchange event of your master checkbox to a javascript method that checked or unchecked the state of all the "slave" checkboxes depending on the state of the master checkbox (would suggest you store the state in a hidden field).
Note, it may make your life easier to instead handle the "change" ajax event and implement the check/uncheck logic on the server side. Just make sure that you provide all the ids of all the slave checkboxes in the update attribute of the p:ajax component:
<p:selectBooleanCheckbox id="masterChkBox" ...>
<p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>
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.