I have the following Table.
What I am trying to do is to disable the "Every ..." columns of checkboxes by default and then enabling them only when the "Weekly" checkbox is selected. As well as that, I want the "Less often", "Monthly" and "Weekly" to be mutually exclusive and "Never" exclusive to the rest.
Fiddle: HTML code
So far I have the following ideas:
make a group of all the "Every ..." disable them.
if checkbox weekly is clicked, given its id, enable the "every" group
give all the less often, monthly and weekly the same name, and make
them mutually exclusive
As far as the coding goes, I have the following scripts:
Enabling set of checkboxes ("Every...") when a specific checkbox is clicked ("Weekly")
This one is for the case of Weekly, enabling the every other day of the week. The question that I'm having is how to apply it to all the rows of the table, not just to one.
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
If all of the "Every" are in a group, and the group id is the first checkbox of Weekly, that would enable all of the checkboxes on the other rows as well. What is there to do about this or what other method should I approach?
Mutually Exclusive
I want three of the checkboxes to be mutually exclusive with eachother. I thought of naming them the same and then just apply the script below. Nevertheless, I want this to apply to all of the rows of the table.
$("input[name=myCheckbox]").click(function() {
var $this = $(this),
wasChecked = $this.attr("checked") === "checked";
$("input[name=myCheckbox]:checked").removeAttr("checked");
if (wasChecked) {
$this.attr("checked", "checked");
}
});
I am a beginner with jQuery so any insight is welcomed.
I should add an id each checkbox. Something like this:
check1_1 check1_2...
check2_1 check2_2...
So you can run in a bucle to check or uncheck each one depending on what you receives in some of them.
$("#check"+i+"_"+X).... //i = row and X = column
Make a for to create all of check functions when page shows and inside call to a unique function with 2 arguments, row and column clicked to make any comparisson.
Related
I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?
like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle
I want to have some form fields mutually exclusive.It is a payment form with a lot of different categories.
Researching I got the code below
$('document').ready( function() {
$("#zero-out :input").each( function() {
$(this).keydown( function() {
$("#zero-out :input").not(this).val("");
});
});
});
This code assumes I could just wrap a div with Id zero-out on the fields I want to be exclusive - that is for those grouped fields only one can have a value. But I have about 4 different field groups. For example one group has textfield and textfield3. Another group has textfield2, textfield4 andtextfield7. Another group has textfield5,textfield6 and textfield8. These fields are not arranged in order(they are arranged in two columns and arranged in some order of convenience) so it is not easy to just wrap a div around a group.
Each textfield already has an onkeyup="javascript:PaySum() function to add up input values.
I need help to get an elegant way to achieve this goal.
I would give each grouping of mutually exclusive inputs some attribute (data-grouping=1, data-grouping=2, etc for example) and then update the code you have above to something like:
$('document').ready( function() {
$("input").each( function() {
$(this).keydown( function() {
$("input").not("[data-grouping='" + this.data("grouping") + "']").val("");
});
});
});
Depending on your page size and usage, blur might be a better event than keydown, and you may be able to further restrict inputs to only those within a particular parent.
I have provided a user with an interface where they can select from 30 options(hardcoded), displayed in a bootstrap dualListBox.
This works perfectly however I would like to set the max amount of options that can be selected to 10.
After which, all the options that could have been selected on the left side, become disabled.
Should the user remove a selected option, the others can then become available for selection again.
I realize that I will be using jquery to achive this, however I am unsure as to how I will count the amount selected and how I will target remaining selections to disable or make them available again.
Is there any advice on how to correctly solve this problem?
The plugin I am using for the dual listbox can be found here:
Bootstrap dualListBox
First I would bind a change event, then I would check if the number of selected items is equal or exceeds then max number of elements, if so I will disable it.
If I understand your question correct it would be something like:
$('#selector-id').on('change', function(e){
var selectedElements = $(this).val();
if(selectedElements && selectedElements.length >= 10){
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
(This is not tested code)
I have a question about disabling or removing HTML elements.
I have 3 groups of select. First group (1,2,3), second group (a,b,c) third group (4,5,6). Here is the logic:
If i select (1) on first group, it will make (b and c) option on second group dissapear and (4,5) dissapear
If i select (2) on first group, it will make (a) option on second group dissapear and (6) on third group is disabled.
If i select (3) on first group, it will make all the option of second group disabled, not dissapear and make (5,6) dissapear.
Can anyone give me a little example of code that needed to do that, or at least to disabled and dissapear HTML element by click event or select event.
I will give you an example on how to do the point two in your list. From this you should be able to adapt a solution for the others. I am assuming the three select boxes has the ids first, second and third.
$("#first").change(function() {
//Reset so that all options are enabled and visible.
$("option").prop("disabled", false).show();
//Do different things depending on what value is selected.
switch($(this).val())
{
case "1":
//Implement some code here.
break;
case "2":
//Hide a option on the second select.
$("#second option[value=a]").hide();
//Disable 6 option on third select.
$("#third option[value=6]").prop("disabled", true);
break;
case "3":
//Implement some code here.
break;
}
});
Please note that this code relies on the value attributes being explicitly set for the options. You could also select the options based on their position in the list, for example #third option:eq(2) for the third option in the third list.
You might also want to add some logic so that if a option is selected when it is deleted or disabled, an other option gets selected instead.
Fiddle.
You should look into jQuery and a super simple example is like this:
<div class="hideMe">
some stuff
</div>
and then in your script:
$(document).ready(function() {
$('.hideMe').click(function() {
//Do some stuff here
});
});
I want to disable the radiobutton the second time it is clicked..I want to put some code in the head..that when a radiobutton is clicked the second time,, it isnt marked anymore..
I want to check and uncheck the radiobutton with each click.
Note: I generate 20 radiobuttons dynamically
Take into account that it is a Radiobutton that is run on the server:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.aspx
UPDATE: This is the only event that the RadioButton (asp WebControl run at="server") has:
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
var rad = (CheckBox)sender;
if (rad.Checked)
{
rad.Checked = false;
}
}
I can uncheck it after each post back..but unless a post back doesnt happen, i cant select and deselect it.. Thats the problem!! :(
I think you should keep with the standard use of RadioButtons, by saying this - use CheckBoxes instead, and clear all checkboxes if a different one is clicked...so when a checkbox is clicked the second time the standard uncheck will occur.
if i get you right then
all u need is a flag attribute of how many times u have clicked on the radio button and each time u click the radio the attribute increased by 1 and check the attribute every click if its 2nd time then disable the radiobutton
so you need to generate ur radiobuttons like this
<input type='radio' onclick='radioClick(this);' how_many_clicked='0' id='whatever id u need' name='whatever name u need' />
and create ur function in the head like the following
function radioClick(e) {
var flag = e.getAttribute('how_many_clicked');
var times = Number(flag);
times += 1;
e.setAttribute('how_many_clicked', times.toString())
if (times > 1) {
e.checked = false;
e.setAttribute('how_many_clicked', "0");
}
else {
e.checked = true;
}
}
Id create an empty array. For every radiobutton you create, add its ID to the array as the key and set its value to 0. This will be the count for the specific button. Whenever a radiobutton is clicked, check the buttons ID against the array, if its less than 2, increment it. If not, disable the current button.
EDIT : didn't realize you were checking if it was already checked, thoguht it was the number of times checked.
$("#id").is(":checked")
Should suffice
Another note ...if all you're doing is disabling an element from being accessed by the user, you should handle this event on the client side. You'll be using unnecessary server callback for functionality easily achievable via javascript. Use jquery click event handlers which can be generic enough for you not to have to use identifiers, making the job that much easier.
Cheers