I am having trouble getting my script to work here. I am trying to target the show me span when the checkboxes are checked and it's not working.
Here is the code and link to fiddle: http://jsfiddle.net/dalond/nonyg6sm/
$('.single').live('change', ':checkbox', function() {
var target = $(this).closest('.single').prev().find('.showMe');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
I got it worked : http://jsfiddle.net/nonyg6sm/3/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if (this.checked) {
target.show();
} else {
target.hide();
}
});
You can modify it to feet your need.
UPDATE
http://jsfiddle.net/nonyg6sm/4/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if ($(this).closest('.NoEd').find("input[type=checkbox]:checked").length == 0) {
target.hide();
} else {
target.show();
}
});
Related
I have a piece of javascript code which initiates mobile menu dropdown. But while I was working on this, I wasn't paying attention and stupidly copied a code from another source and now I can't click on parent items on mobile menu.
When I remove e.preventDefault();, I'm getting an error in console and menu is not working. Here is the full code. What can I do with my code to make the parent items clickable?
var $dropdownOpener = $('.mobile-header-navigation .menu-item-has-children > a');
if ($dropdownOpener.length) {
$dropdownOpener.each(function () {
var $thisItem = $(this);
$thisItem.on('tap click', function (e) {
e.preventDefault();
var $thisItemParent = $thisItem.parent(),
$thisItemParentSiblingsWithDrop = $thisItemParent.siblings('.menu-item-has-children');
if ($thisItemParent.hasClass('menu-item-has-children')) {
var $submenu = $thisItemParent.find('ul.sub-menu').first();
if ($submenu.is(':visible')) {
$submenu.slideUp(450);
$thisItemParent.removeClass('qodef--opened');
} else {
$thisItemParent.addClass('qodef--opened');
if ($thisItemParentSiblingsWithDrop.length === 0) {
$thisItemParent.find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
} else {
$thisItemParent.siblings().removeClass('qodef--opened').find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
}
}
}
});
});
}
}
Maybe try to call e.originalEvent.preventDefault() with null checks like :
e && e.originalEvent && e.originalEvent.preventDefault()
I added a class that hides the 2nd and 3rd dropdown unless there's a click or change in the 1st selection.
Actual Behavior
Upon selecting "regular" from the dropdown doesnt execute $(".dropdown").removeClass("no-display");
It only does when I select the 2nd option "project based". When I click project based the 2nd dropdown to show is the mother hub which is supposed to be rider category first. What can i fix and add to my script in order for my 2nd dropdown to remove $(".dropdown").removeClass("no-display"); with the regular option?
Script
$('#rider_type').on('change', function(){
if (this.value == 'PROJECT_BASED') {
$('#rider_category').attr("disabled", "disabled");
$('#hub')[0].selectedIndex = 0;
hub.map(function() {
if(this.text == 'ONDEMAND'){
this.setAttribute("hidden", "hidden");
}
});
$('#hub-selection').css('display', 'block');
}
else {
$('#hub-selection').css('display', 'block');
$('#rider_category').removeAttr("disabled");
$('#hub')[0].selectedIndex = 0;
hub.map(function(item,index) {
if(this.text == 'ONDEMAND'){
this.removeAttribute("hidden");
}
});
}
$('#rider_category')[0].selectedIndex = 0;
category.map(function() {
if(this.text == 'ONDEMAND'){
this.setAttribute('hidden', 'hidden');
}
});
});
$('#hub').on('change', function(){
$(".dropdown").removeClass("no-display");
if (this.options[this.selectedIndex].text == 'ONDEMAND') {
$('#rider_category').attr("disabled", "disabled");
$('#rider_category').val("ONDEMAND");
category.map(function(index) {
if(this.text == 'ONDEMAND'){
this.removeAttribute("hidden");
$('#rider_category')[0].selectedIndex = index;
}
});
riderType.map(function() {
if(this.text == 'PROJECT_BASED'){
this.setAttribute('hidden', 'hidden');
}
});
} else {
riderType.map(function() {
if(this.text == 'PROJECT_BASED'){
this.removeAttribute('hidden');
}
});
const rider_type = $("#rider_type").children("option:selected").val();
// disable category dropdown and make 'SCHEDULED' category option default
// $('#rider_category').attr("style", "pointer-events: none;");
if (rider_type !== 'PROJECT_BASED') {
$('#rider_category').attr("disabled", false);
} else {
}
var categoryDropdown = document.getElementById("rider_category");
var option = document.createElement("option");
option.text = "SCHEDULED";
option.value = "SCHEDULED";
if ($("#rider_category option:contains('SCHEDULED')").length < 0) {
categoryDropdown.add(option, categoryDropdown[1]);
}
$('#rider_category').val("SCHEDULED");
}
});
$('#rider_category').on('change', function(){
if (this.options[this.selectedIndex].text == 'ONDEMAND') {
hub.map(function(index) {
if(this.text == 'ONDEMAND'){
$('#hub')[0].selectedIndex = index;
}
});
}
if (this.options[this.selectedIndex].text === 'SAME DAY PICKUP') {
$('#hub-selection').css('display', 'none');
$('#rider_type')[0].selectedIndex = 1;
} else {
$('#hub-selection').css('display', 'block');
}
$(".dropdown").removeClass("no-display");
});
Actual Dropdown
I think problem is with your this. Its hard to help you without any html js and css example. But it looks like you should use jQuery selector like $(this) and call value with val() functio: $(this).val(). Same for others but inside .map() you define this.text. What should it do? Or whitch value should it call? It is from $('#rider_type').on('change', function(){}? Then use $(this).text(). If from map. then use for example:
hub.map(function(val, index) {
if(val.text == 'ONDEMAND'){
this.setAttribute("hidden", "hidden");
}
});
What is hub? Array? Object?
Could you precise your question? With better example code? In JsFiddle?
I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}
my problem is the following code is not working without an alert().I am using a two level select/deselct all box. but the code is working for one level only. It is not being able to deselect the 'select all' checkbox on unchecking a single checkbox or vice-versa without the alert..
alert('17');
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}
});
}
It's highly likely that you just need to wrap it in $(function() { /* code */ });. At present, your code is being stopped by the alert, which lets the document load in the background so by the time you close the alert, the page is ready for everything you're trying to do.
By just telling it to wait until the page has finished loading, you shouldn't need the alert any more.
$(function() {
// code
});
is exactly the same as
$(document).ready(function() {
// code
});
The code is probably running before the dom is ready, Try this:
$(function(){ //by passing jQuery a function instead of a selector
// it will call the function when the dom is ready
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}
});
}
});
You should execute your jquery script after DOM is ready, so wrap it inside $(function(){});
NOTE - Also, you need not to iterate $('input.DataCheckAll') using .each(), to check / uncheck. You can simply use $('input.DataCheckAll').prop('checked',true);
$(function(){
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
/*if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}*/
// to select / deselect all data check boxes
$('input.DataCheckAll').prop('checked',this.checked);
});
}
});
here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK
Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.
If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}