I am trying to show and hide divs with select tag. In the divs there are check boxes which has a logic of disabling them after the user checked 2. When I am changing the divs the checkboxes are staying disabled. For some reason the max 2 checkbox logic is disabling all the checkboxes.
Here is the fiddle
http://jsfiddle.net/sghoush1/yJCYW/
The Jquery looks somewhat like this
$('.selectOption').change(function(){
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
var max = 2;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if(current >= max){
$('.resourceMsg').show();
} else{
$('.resourceMsg').hide();
}
});
Just uncheck the checkboxes and set the disabled property to false whenever the select element is changed:
$(function () {
var max = 2;
var checkboxes = $('input[type="checkbox"]');
$('.selectOption').change(function () {
checkboxes.prop({
'disabled': false,
'checked': false
});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if (current >= max) {
$('.resourceMsg').show();
} else {
$('.resourceMsg').hide();
}
});
});
jsFiddle example
You have no code to enable them.
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
This will disable all unchecked checkboxes on the page, and not just those in the currently displayed div.
You need to reconsider what should occur upon the selection change; you either need to throw away existing selections or re-enable checkboxes (effectively the same thing):
$('.selectOption').change(function(){
$('.descContent').find(':checked,:disabled').prop({checked: false, disabled: false});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
Alternatively, you could just disable the checkboxes in the current div.
checkboxes.change(function() {
var content = $(this).parents('.descContent');
var current = content.find(':checked').length;
content.find(':not(:checked)').prop('disabled', current >= max);
// ...
}
Related
I've created the input box with plus and minus button, to increase and decrease the value of input box while clicking the button.
I'm adding attribute 'disabled' to minus button when input value is set to zero, but the problem is that when page loads the input has value zero by-default but i need to click the minus button one time to add the attribute 'disabled' which is not i'm looking for, what i want is when the value of input is zero, i want minus button to have attribute set to be disabled by default and when i click the plus button it'll remove the 'disabled' attribute form minus button.
Even i tried adding attribute on button with window load but with no luck like this:
$( window ).load(function() {
$('.minus').attr('disabled', true)
})
Here's the jsFiddle link for the same.
Hope you understand this.
Thanks in advance for the help.
Just add the disabled property on the input
<button disabled class="change_qty minus cursor_hover">-</button>
Here is the working code for you. I just added a function which gets called on document.ready and on every click of + or - sign:
$(".plus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value < 30) {
value = value + 1;
} else {
value = 30;
}
$input.val(value);
checkAndDisable();
});
$(".minus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
$(this).removeAttr('disabled');
} else {
value = 0;
$(this).attr('disabled', true);
}
$input.val(value);
checkAndDisable();
});
$(document).ready(function() {
checkAndDisable();
});
$("#inputField").on('change', function(){
if($(this).val() <= 0)
$(this).val(0);
checkAndDisable();
});
function checkAndDisable() {
$(".minus").removeAttr('disabled');
if ($("#inputField").val() == 0) {
$(".minus").attr('disabled', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change_qty minus cursor_hover">-</button>
<input type="number" style="height:26px;width:40px;text-align:center;" value="0" id="inputField">
<button class="change_qty plus cursor_hover">+</button>
use document.ready to disable the button as
$(document ).ready(function() {
$('.minus').attr('disabled', 'disabled')
})
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;
});
With the help of answers I found here, I try to disable submit button and send an alert message when clicked on it until there's not at least 2 checkboxes checked.
What I am doing wrong ?
var selected = $('#frmCompare :checkbox:checked').length;
function verifCompare() {
if (selected >= 2) {
//good
$('#frmCompare').submit();
} else {
//bad
alert('Veuillez selectionner au moins 2 produits à comparer...');
return false
}
}
$(document).ready(function () {
$('#btnCompare').attr('disabled', 'disabled');
$('#frmCompare :checkbox').change(function () {
//alert(selected);
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});
});
At this point, only alert message works.
Fiddle
EDIT : added fiddle
There is no enabled attribute in HTML.
$('#btnCompare').prop('disabled', selected < 2);
You also need to recalculate the value of selected at every change, you can't just go with what it was set to at page load.
You initialize the count of checked checkboxes just once, when your script is first parsed. The count will not be recomputed later. This line:
var selected = $('#frmCompare :checkbox:checked').length;
should be inside the verification function, not outside.
You should change your code as
$('#frmCompare :checkbox').change(function(){
//update selected variable
selected = $('#frmCompare :checkbox:checked').length
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});
I have a form spread across multiple divs that are being displayed on and off using jQuery. I would like to disable the next and previous buttons on the first and last div when they are visible.
This sounded like an easy task based on the little that I do know about jQuery but it is proving to be more difficult than I imagined given my current code.
Here are my current next and previous button functions
var sel = "div[data-type='form']";
var current = $(sel).get(0);
$(sel).not(current).hide();
$("#next").click(function () {
if ($(form).valid()) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
});
and here is a fiddle of what is happening at the moment http://jsfiddle.net/GZ9H8/6/
This works (Note: I removed the validation for testing purposes).
$("#next").click(function () {
if (true) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
if (!$(current).next(sel).get(0)){
$(this).hide();
}
if ($(current).prev(sel).get(0)){
$("#prev").show();
}
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
if ($(current).next(sel).get(0)){
$("#next").show();
}
if (!$(current).prev(sel).get(0)){
$(this).hide();
}
});
Note that the previous button should probably be hidden from the start. Also, you can disable instead of hide if you want.
This may be useful:
$("#next").click(function () {
if ($(form).valid()) {
current = $(current).next(sel);
$(current).show();
$(sel).not(current).hide();
// Last element's index is equal to length - 1
$(this).attr('disabled', current.index(sel) == $(sel).length - 1);
// First element's index is equal to 0
$("#prev").attr('disabled', current.index(sel) == 0);
}
});
$("#prev").click(function () {
current = $(current).prev(sel);
$(current).show();
$(sel).not(current).hide();
// Last element's index is equal to length - 1
$("#next").attr('disabled', current.index(sel) == $(sel).length - 1);
// First element's index is equal to 0
$(this).attr('disabled', current.index(sel) == 0);
});
Regards
Would anyone know of a ready-made script or plugin providing:
-Shift click for check/uncheck all in range
-CTRL click to select or unselect all
That can works off the check inputs 'name' (instead of all on a page or all inside a div):
input[name='user_group[]']
input[name='record_group[]']
I've been using a couple of scripts (javascript and jQuery) but they're based on all checkboxes in a div or table and I'm not smart enough to roll my own or modify another script. Google searching on this has been a little difficult (too many common terms I think)...
Thanks Much Appreciated!
I started playing around with this script, although it's missing a CTRL+Click feature (select all/none control).
In it's original form it works against all checkboxes on a page. I changed the "$('input[type=checkbox]').shiftClick();" linke to "$("input[name='selected_employees[]']").shiftClick();" and as far as I can tell it seems to be working perfectly now against only the single checkbox group.
The only flaw (for my requirements) is there is not a CTRL+Click function to toggle check or un-check all checkboxes in the group.
<script type="text/javascript">
$(document).ready(function() {
// shiftclick: http://sneeu.com/projects/shiftclick/
// This will create a ShiftClick set of all the checkboxes on a page.
$(function() {
$("input[name='selected_employees[]']").shiftClick();
// $('input[type=checkbox]').shiftClick();
});
(function($) {
$.fn.shiftClick = function() {
var lastSelected;
var checkBoxes = $(this);
this.each(function() {
$(this).click(function(ev) {
if (ev.shiftKey) {
var last = checkBoxes.index(lastSelected);
var first = checkBoxes.index(this);
var start = Math.min(first, last);
var end = Math.max(first, last);
var chk = lastSelected.checked;
for (var i = start; i < end; i++) {
checkBoxes[i].checked = chk;
}
} else {
lastSelected = this;
}
})
});
};
})(jQuery);
});
</script>
I believe this should work!
Working demo on jsFiddle: http://jsfiddle.net/SXdVs/3/
var firstIndex = null;
$(":checkbox").click(function(e) {
$this = $(this);
if (e.ctrlKey) {
if ($this.is(":checked")) {
$("input[name='"+ $this.attr("name") +"']").attr("checked", "checked");
} else {
$("input[name='"+ $this.attr("name") +"']").removeAttr("checked");
}
} else if (e.shiftKey) {
$items = $("input[name='"+ $this.attr("name") +"']");
if (firstIndex == null) {
firstIndex = $items.index($this);
} else {
var currentIndex = $items.index($this);
var high = Math.max(firstIndex,currentIndex);
var low = Math.min(firstIndex,currentIndex);
if ($this.is(":checked")) {
$items.filter(":gt("+ low +"):lt("+ high +")").attr("checked", "checked");
} else {
$items.filter(":gt("+ low +"):lt("+ high +")").removeAttr("checked");
}
firstIndex = null;
}
}
});