Button is being disabled due to hidden select elements - javascript

I have a form with three select options:
Fit
Colour
Size
By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour).
There are three different 'Size' dropdowns, but only one is visible at any time depending on what is selected from the 'Fit' dropdown.
The Button is disabled if an option value="none".
Problem
The Button only becomes active if all three 'Size' dropdowns are altered so that their value is not "none" (this is done by selecting an initial size for Regular, and then selecting Petite and Long from the 'Fit' dropdown). Ideally, I only want the button to take into account the 'Size' dropdown that is active.
Update
Working jsFiddle solution provided by #nagappan below, big thanks.
https://jsfiddle.net/dodgers76/c0dvdwbz/
var currentSelectedVals = {'selector-fit':'','selector-color':'','selector-sizes':''};
var disableComboVals = [
{'selector-fit':'','selector-color':'','selector-sizes':'none'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'10'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'20'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'22'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'24'},
{'selector-fit':'long','selector-color':'','selector-sizes':'22'},
{'selector-fit':'long','selector-color':'','selector-sizes':'24'}
];
function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
cnt = 0;
$.each(vals, function(key,val) {
console.log('comparing key val '+key+val);
if (val === '' || val === currentSelectedVals[key]) {
console.log('>>matched values');
cnt = cnt + 1;
}
});
if (cnt===3) {
return true;
}
return false;
});
};
$(function(){
var sizeVal = 'none';
$("select.selector-fit").on("change", function(){
//remove active
$("select.selector-sizes.active").removeClass("active");
//check if select class exists. If it does then show it
var subList = $("select.selector-sizes."+$(this).val());
if (subList.length){
//class exists. Show it by adding active class to it
subList.addClass("active");
subList.val(sizeVal);
}
});
$('.selector-sizes').on('change', function() {
sizeVal = $(this).val();
});
});
$(function() {
$('.selector').on('change', function() {
var $sels = $('option.selector-sizes:selected[value="none"]');
var isSizeSelector = jQuery.inArray( "selector-sizes",this.classList);
currentSelectedVals[this.classList[1]] = this.value;
console.log(currentSelectedVals);
var result = checkDisableCombo();
console.log(result);
if ( result.length > 0) {
console.log('disabled false');
$("#Testing").attr("disabled", true);
} else {
$("#Testing").attr("disabled", false);
}
}).change();
});

If we want to disable the button by combination of the drop down selected values. We can have a global variable to track the current selected values from three drop downs. Only we can have array of disbale combos. So whenever user select a value we cross check with disable combos and if it matches we can disable the button. Validate the combo can be done as below. Updated the jsfiddle link. JS FIDDLE UPDATED
function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
cnt = 0;
$.each(vals, function(key,val) {
console.log('comparing key val '+key+val);
if (val === '' || val === currentSelectedVals[key]) {
console.log('>>matched values');
cnt = cnt + 1;
}
});
if (cnt===3) {
return true;
}
return false;
});

Related

disable anchor link '<a>' if one of my six checkboxes are not checked

How can I disable a anchor link if one(1) of my six(6) checkbox is not check?
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("a").click(function(e) {
if($("first_option").prop("checked") === false) {
e.preventDefault(); return false;
} else {return true;};
});
Your current logic doesn't work as you're only looking at the checked property of the first element you select, not all of them.
To achieve what you require, you can use the :checked selector to get all the checked elements within the selectors you provide, then check the length property of the result to see if there aren't any. Try this:
var $first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("#tmp_button-99035").click(function(e) {
if ($first_option.filter(':checked').length === 0) {
e.preventDefault();
alert('Please Choose Collar Colour To Continue');
};
});
first_option.prop("checked") will always check for first element. What you have to do is loop over all elements to check
Like this
$("#tmp_button-99035").click(function(e) {
var isChecked = false;
for (var i = 0; i < first_option.length; i++) {
if (first_option.eq(i).prop("checked")) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert('Please Choose Collar Colour To Continue');
e.preventDefault();
}
return isChecked;
});
Well, the js snippet of yours is only checking the first element. So, you have to track other checkboxes as well for correct result.
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094')
$(document).on('click', '#tmp_button-99035', function (e) {
if ($(first_option).filter(":checked").length == 0) {
e.preventDefault();
}
});

jQuery Multi-Select Listbox where 'None' Option Deselects All Others

Fiddle here: https://jsfiddle.net/q0o11c5e/17/
I have a Multi-Select Listbox with 'None' with the following requirements:
Selecting 'None' included anywhere in the selection => only 'None'
is selected (anything else is turned off)
Deselecting any other item
with Ctrl+click, if nothing else is selected, will automatically
select 'None'.
This is implemented with jQuery's Change function. My issues:
1) First of all, for #2 (Full Ctrl+click deselection): the flow doesn't come into the $( "#listbox" ).change(function() at all. You can see that because if you select 'A' and then deselect it with Ctrl+click, the Alert at the top of the function isn't displayed.
2) For #1, if the selection includes 'None' (value '') anywhere, I create a blank array, push '' onto it, and set the Listbox Val to it (and break immediately), but that doesn't work.
$( "#listbox" ).change(function() {
alert('SelArray: ' + $('#listbox').val() + ' Length: ' + $('#listbox').val().length);
// If no selection, automatically select 'None'
if ($('#listbox').val().length == 0) {
alert('Nothing selected');
}
else
{
// If new selection includes empty ('None'), deselect any other active selections
$.each($('#listbox').val(), function (index, value) {
if (value == '') {
alert('None selected, clearing anything else..');
var noneOnly = {};
noneOnly.push('');
$('#listbox').val(noneOnly);
return false;
}
});
}
});
If I get the intention correctly, something like the below?
$( "#listbox" ).change(function() {
var arr= $(this).val();
if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === ''))
$(this).val(['']);
});
This simply sets the selection whenever no value is selected or when multiple values are selected including 'none'
Fiddle
$("#listbox").on("input change", function() {
if($(this).find("option[value='']:selected").length!=0 || $(this).find("option:selected").length==0) {
$(this).find("option").attr("selected", false);
$(this).find("option[value='']").attr("selected", true);
return false;
}
});
hi, check my above piece of code, this is my try https://jsfiddle.net/q0o11c5e/22/
(Posted on behalf of the question author).
This is solved now, final fiddle here: https://jsfiddle.net/q0o11c5e/23/
JS code:
$( "#listbox" ).change(function() {
var arr= $(this).val();
if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === '')) {
$(this).val(['']);
}
else
{
// If new selection includes empty ('None'), deselect any other active selections
$.each(arr, function (index, value) {
if (value == '') {
var noneOnly = [];
noneOnly.push('');
$('#listbox').val(noneOnly);
return false;
}
});
}
});

kendo ui grid: Compare data in multiple selected rows?

Ok, rephrasing the question here, it seems the articulation was lacking.
I have a kendo ui grid, and when I make multiple selections (2 or more at a time) of rows, I need to compare values of a specific column in all the selected rows to determine if they are exactly equal(same) or not. Here's is my kendo 'change: ' function, the dataItem in question we'll call 'fancyNumber':
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
function allValuesSame() {
for (var i = 1; i < selectedRows.length; i++)
{
if(this[i] != this[0])
return false;
}
return true;
}
if (selected.length > 1){
var selectedRows = $("#myTable").data("kendoGrid").select();
var fancyNumberText = this.dataItem(this.select()).fancyNumber
if (allValuesSame(fancyNumberText) === true) {
alert(fancyNumberText); //just testing to see what I get
}
return allValuesSame(fancyNumberText);
}
if (selected.length == 0) {
$('#fancyButton').attr('disabled', 'disabled');
} else if (selected.length == 1) {
$('#fancyButton').attr('disabled', false);
} else if (selected.length > 1 && allValuesSame == true) {
$('#fancyButton').attr('disabled', false);
}
},
Clearly, this isn't correct; how do I do this?
You can use the .dataSource property to get the model that your grid is bound to and make the comparison there.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource
Say your grid has an Id of myDataGrid, you would use:
var gridModel = $("#myDataGrid").data("kendoGrid").dataSource.data();
// Sample comparison
if (gridModel[3].someField === gridModel[5].someField) {
// Do something with your buttons
}
You need to set up the grid with the following...
.Selectable(sel => sel.Mode(GridSelectionMode.Multiple))
.Events(e => e.Change("onChange"))
Once you have these in place, you can select individual lines and you have an event which is called on selection onChange
In your script, wire up this funciton...
function onChange() {
//you can get the selected row like this
var selected = $.map(this.select(), function(item) {
return item.getAttribute('data-uid');
});
//if selected count > 1 then check logic and enable/disable button
EnableDisableButton(true, "#myButton");//assuming condition was good
}
You need to set up the onChange to record the rows values from each selection, maybe using an array and then comparing the values in the array.
function EnableDisableButton(isToBeEnabled, buttonName) {
if (isToBeEnabled)
$(buttonName).removeAttr("disabled").removeClass("k-state-disabled");
else
$(buttonName).prop("disabled", true).addClass("k-state-disabled");
}

jQuery problems with function

What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?
I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).
How can i fix this problem ? Here is my sample code.
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
if(selection == '10'){
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown'+selection).slideUp();
} else {
$('#slidedown'+selection).slideDown();
}
});
});
Thanks, any help will be appreciated.
EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.
You should have another selection var inside the click callback:
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
});
$("input:radio[name='checkbox']").click(function() {
var selection = $('#category').val(); //This does the trick
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Also, callbacks must be separated for not binding a new listener each time
Hope this helps. Cheers
Use the disabled property to enable and disable the radio buttons.
$('#category').change(function() {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
$('input:radio[name=checkbox]').prop('disabled', selection != '10');
});
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.

Select All SubCategory Checkboxes When Parent Category CheckBox Clicked

Hii I have an HTML Page which displays the category and their respecting sub categories with a checkbox beside every category. My list looks somewhat like this :-
Folder1
--Folder2
--Folder5
--Folder8
Folder3
--Folder4
--Folder9
What i need is to check all the sub categories when the parent category is clicked.
(i.e Folder2,Folder5,Folder8 should get selected when the checkbox beside Folder1 is checked)
a bit of a vague question so here are a couple of examples
Based on a class, check the parent if any child is selected, check ALL children if a parent is checked.
var checkboxHandlerObj = {
init: function () {
$('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
$('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked)
},
parentClicked: function () {
var parentCheck = this.checked;
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').each(function () {
this.checked = parentCheck
});
},
childClicked: function () {
var temp = $(this).attr('class').split('-');
var parentId = temp[1];
$('#' + parentId)[0].checked = $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]:checked').length !== 0;
}
}
checkboxHandlerObj.init();
a fiddle for that:http://jsfiddle.net/gfDAh/
and here is a parent dependance model where if ANY child is unchecked, it unchecks the parent, and it has a "check all children" box
$('#jobTypesMaster').click(function() {
var iam = this.checked;
$('.billdetail').each(function() {
this.checked = iam;
});
if (!iam) {
$('.billfinal:checkbox')[0].checked = iam;
};
$('.billfinal').attr('disabled', !this.checked);
if (!iam) {
$('.billspaid:checkbox')[0].checked = this.checked;
};
$('.billspaid').attr('disabled', $('.billfinal').checked);
});
$('.billdetail').click(function() {
if ($('.billdetail:checked').length < $('.billdetail:checkbox').length) {
$('.billfinal:checkbox')[0].checked = false;
$('.billspaid:checkbox')[0].checked = false;
$('.billfinal').attr('disabled', true);
$('.billspaid').attr('disabled', true);
$('#jobTypesMaster')[0].checked = false;
}
else {
$('.billfinal').attr('disabled', false);
};
});
$('.billfinal').click(function() {
$('.billspaid:checkbox').attr('disabled', !this.checked);
if (!this.checked) {
$('.billspaid')[0].checked = false;
};
});
$('.billdetail').trigger('click'); //set value based on initial checked count
Fiddle for that: http://jsfiddle.net/h682v/3/
The problem is actually how to find the checkboxes that belong to a such subcategory.
Give the subcategory checkboxes the same name (eg subcat_folder1).
For the category checkbox, plase a javascript function on the onClick handle.
When the user clicked on the folder1 checkbox, find all elements with the name subcat_folder1 (getElementsByName('subcat_folder1'))and do your thing.

Categories

Resources