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
});
});
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 have a select2 dropdown with a few values (let's say colors), and I want to remove from the dropdown list the current selected item. For example, if all the options are
white, green, red, blue
and the current selected item is white, if the user clicks on the dropdown, he'll only see the other 3 colors (green, red and blue).
Now, I can easily remove the currently selected item with jquery, and restore it back on change, but that really doesn't feel clean.
Is there any built-in method for doing that, or at least a method that is a little bit more "cleaner"?
Remove An options:
$("#selectBox option[value='White']").remove();
Add an options:
$("#selectBox").append('<option value="greed">Green</option>');
use .hide() to hide it or use a custom class with display: none; and add it to the option.
$(".selector option[value=white]").hide()
For cross-browser support, disable it instead of hiding it.
$(".selector option[value=white]").prop("disabled", true)
You can use :selected from the jQuery library.
( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
(select option:selected).text() = " ";
});
You can use the templateResult option to customize options you see in the dropdown. This can also be used if there are certain options you don't want to display.
You pass a javascript function as the value of the templateResult option. Example:
$('#color').select2({
templateResult: formatColorOption
});
Before calling .select2() on your select element, you first need to define the formatColorOption() javascript method. Example:
function formatColorOption (color) {
if (!color.id) { return color.text; }
// this next line prevents the currently selected option from showing up in the dropdown list
if ($('#color').find(':selected').val() == color.element.value) { return null; }
// otherwise display the name of the color
return color.text;
};
To see a fancy example that combines TemplateResult with some other options, check out the JSFiddle.
https://jsfiddle.net/vatdoro/4xu6vcc5/
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.
I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.
First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});
you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/
When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO
I have a dropdown select list on my page of class="TypeFilter".
I have a jQuery event that fires when a value in that list is selected.
$(".TypeFilter").change(function()
{
// Extract value from TypeFilter and update page accordingly
));
I now have to add another list to the page, and I want to implement functionality which will prevent the .change(function() from running unless both are selected.
In both lists the first option in the list is some text instructing the user to select one of the items, so I was thinking of just writing some logic to test that both lists have a selected index greater than 0.
I think this is a touch unclean though, especially considering that other pages that have a TypeFilter use the same logic.
Is there any nifty functionality in jQuery that can do this?
edit I should specify that the user needs to be able to update the page by selecting either dropdown, so I can't put the onchange on the second element and test that the first element has a selected value, as suggested in one of the answers
If you bind the same event to all dropdowns, you can get a collection of all the dropdowns and check that all of them are selected. Example:
$('.Dropdown').change(function(){
var elements = $('.Dropdown');
if (
elements.filter(function(){
return this.selectedIndex > 0;
}).length == elements.length
) {
// all dropdowns are selected
}
});
As you partly mention, put the onchange on the second element and test that the first element has a selected value before you fire off any logic.
Use bind instead, and as the eventdata, send a function that checks that either that both are selected or that the other is selected. Untested code:
function checker() {
// test your conditions
}
$(".TypeFilter").bind('change', {test: checker}, function(event)
{
if (event.data.test && event.data.test()) {
// Extract value from TypeFilter and update page accordingly
}
));
This way the other pages that use the same function will not notice any changes.