I am trying to bring up a menu when any of the checkbox is selected, as you can see in screenshot below, it shows the number of selections and the menu also disappears when none is select.
I am able to bring up the menu with this code
$("input[name='id[]']").focus(function(){
$("#menu").fadeIn();
});
However, i dont know how to hide it when the checkboxes are unselected and how to count number of selections.
Thank You.
When you check a checkbox, the focus or click event will be triggered. You can count the checked checkboxes with
$("input:checked").length;
If you use that number to hide your menu it should be possible:
$("input[name='id[]']").click(function(){
if($("input:checked").length > 0) { //checked boxes?
if($("#menu:visible").length == 0) { //menu not visible?
$("#menu").fadeIn();
}
} else {
$("#menu").fadeOut();
}
});
To count the number of selections you can use:
$("input[type='checkbox']:checked").length;
So..
$("input[type='checkbox']").click(function(){
if ($("input[type='checkbox']:checked").length < 1)
$("#menu").hide();
});
$("input[name='id[]']").focus(function(){
if ($(this).is(':checked')){
$("#menu").fadeIn();
}else{
$("#menu").fadeOut();
}
});
This should do what you need,
EDIT:
Your selector doesn't seem alright though. You should make it more specific.
for example:
if it starts with id[ you can do it in this way:
$("input[name^=id\\[]")
this will include all input fields their names starting with 'id[' and '\' this is for escaping this '['.
Hope it helps, Sinan.
Related
In this fiddle,There is a to button.
When the to button is pressed a pop up appears with a drop down menu.
From the drop down menu a user either selects users or groups then a table with check boxed rows appear.
Now, after selecting a few check boxes and hitting the ok button, the selected check boxes name should be displayed in the textfield.
I am doing this like this:
$('#mytable tr').find('input[type="checkbox"]:checked').each(function(i)
{
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
But its not working.
I added an alert, but still, the alert is not showing which means the control is not going inside.
Please tell me how to do this.
You're reading from the wrong table. Your selector specifies #groupsTable (for instance), but the groups table in the modal has no id on it. Your selector is reading the checkboxes from the main page instead.
You can either add ids to your tables in the modal div, or use these selectors instead:
$('#ToOk').click(function(){
$('#users tr').find('input[type="checkbox"]:checked').each(function(i) {
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
});
$('#groups tr').find('input[type="checkbox"]:checked').each(function(i) {
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
});
var ds = (sCheckbox.length > 0) ? sCheckbox.join(",") : "";
alert("ds is "+ds);
});
I have a form that is divided up into a Kendo UI Panel Bar. In the first panel I have a field that when populated with any text, checks a checkbox that is currently not visible and is located within the collapsed panel below it.
My issue is that the checkbox doesn't check. I've read some posts on how a checkbox is disabled when it isn't visible. Is there a workaround for this?
function Validate(uid) {
if ($("#SomeNumber_" + uid).val().length > 0)
{
$("#MyCheckBox").attr('checked', true); //This checkbox is display:none at the time this is set
//Also tried these, but they didn't work:
//$("#MyCheckBox").click();
//var myCheckBox= document.getElementById("MyCheckBox");
//myCheckBox.checked = true;
}
}
Just tested the display none on a checkbox by dynamically changing it through a button. It works with display none set.
http://jsfiddle.net/jmsessink/hcWf8/1/
The following will set the attr of your checkbox to 'checked' -
this -
$('#MyCheckBox').attr('checked', true)
as well as
$('#MyCheckBox').attr('checked', 'checked')
as well as
document.getElementById('MyCheckBox').checked = true;
as well as
document.getElementById('MyCheckBox').checked = 'checked';
*edit - updated jsfiddle version to show these four methods
Try $("#MyCheckBox").prop('checked', true);
I have a similar usecase and can attest that it is possible to check a hidden checkbox.
I think the correct way to use attr is
$("#MyCheckBox").attr('checked', 'checked');
I have a table editable with an Invoice calculator. I have a small issue in my select editable. If you click on IVA 21 % you notice that you can select the option IVA none, i need that once i selected the option none in my select editable, it does not automatically calculate my IVA. I do not how to manage it, or setting an on change jQuery or a submit, in both cases i was not able to do it!.
The calculator works, if you select no Iva and then you clone a row clicking on +, the IVA is not calculated but i want to achieve it the same once i select the option NO IVA.
This the code :
if ($('.editable_selectiva').text() === "NO IVA") {
$('#total').html(0);
$('#total1').html(total);
}
else {
$('#total').html(total*0.21);
$('#total1').html(total*1.21);
}
})
}
Hope the explanation is clear and you can help me out. Thanks
Bind a change event to the select. Add this code
$('p.editable_selectiva').change(function() {
tally('p#subtotal');
tally('p#total');
});
Try this one
$('.editable_selectiva select').change(function(){
tally('p#subtotal');
tally('p#total');
});
I need to manually select a dropdown option if a value is matched. Here is the code:
if($("#hiddenMyField").val() != "") {
$("#dropdown").each(function(i){
$('option', this).each(function() {
if($(this).html() == $("#hiddenMyField").val()) {
// code to select the option
} else {
alert('not matched');
}
});
});
}
How can I select the current option located in the drop down if that if condition is met?
Thanks
Options have a selected property:
this.selected = true;
$(this).attr('selected', true);
should do the magic.
All right I managed to find a workaround for this.
Since the options were being translated to divs with checkboxes with the ui.dropdownchecklist.js I first loaded the multiple dropdown with its normal view, then selected the necessary items with the this.selected = true and then I loaded the ui.dropdownchecklist.js function so the items will be translated back to divs with checkboxes. The user doesn't even see the actual multiple checkboxes so this worked out well for me. When they are translated to checkboxes, the selected items are kept and are also ticked when they are transferred.
I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!
The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo
Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.
jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});