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?
Related
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();
}
});
In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});
So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>
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();
}
});
This is in addition to previous question
I've got a bunch of checkboxes in a table, I would like to restrict the user to check the checkboxes based on following rules.
If user is clicking any one of the checkbox in a particular row, the we have to make next two checkboxes checked programatically (jquery) and as well as uncheck (toggle).
There will be Block button/checkbox, if user is clicking block button then we have to disable all checkboxes in that row, except already checked.
We have restrict user to check checkbox, if there is no next two checkboxes available(i.e, unchecked). This is rule exception for last checkbox in a row (User can able to check last checkbox in a row).
Here i have managed with 1 and 2 rules, but for third rule i'm not getting any idea.
Jquery
$('.grp:checkbox').change(function () {
var obj = $(this).parent().nextAll("td").slice(0, 2);
if ($(this).is(":checked")) {
//$(this).removeClass('grp');
obj.find(":checkbox").prop('checked', true);
obj.find(":checkbox").prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false);
obj.find(":checkbox").prop('disabled', false);
}
});
$('.block').change(function (e) {
var obj = $(this).parent().nextAll("td");
if ($(this).is(":checked")) {
obj.find(":checkbox").prop('checked', true).prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false).prop('disabled', false);
}
});
Demo Fiddle
if anyone giving me any suggestions, it may help full for me.
Thanks in advance.
Finally i got my answer,
here i'm posting my answer, it my helpfull to someone.
Jquery
$('.adj :checkbox').change(function () {
//alert('1');
var obj = $(this).parent().nextAll("td").slice(0, 2);
if ($(this).is(":checked") && $(this).hasClass("grp")) {
//alert('2');
if (obj.find(".grp:checkbox").hasClass("grp")) {
var i = $(this).attr("id");
//alert(i);
$(this).addClass(i);
$(this).toggleClass('grp bkd');
obj.find(".grp:checkbox").prop('checked', true).addClass(i);
obj.find(".grp:checkbox").prop('disabled', true).toggleClass('grp bkd');
} else {
$(this).prop('checked', false);
}
} else {
var id = $(this).attr("id");
$(this).removeClass(id);
$(this).toggleClass('grp bkd');
obj.find("." + id + ":checkbox").prop('checked', false);
obj.find("." + id + ":checkbox").prop('disabled', false).toggleClass('grp bkd').removeClass(id);
}
});
$('.block').change(function (e) {
var obj = $(this).parent().nextAll("td");
if ($(this).is(":checked")) {
obj.find(".grp:checkbox").prop('checked', true).prop('disabled', true);
} else {
obj.find(".grp:checkbox").prop('checked', false).prop('disabled', false);
}
});
Working Fiddle
1) Create an empty array chked.
2) Iterate the obj to check whether it is checked or not using $.each()
$.each(obj, function (i, j) {
});
3) Push the value returned by each iteration.
chked.push($(j).find('input')[0].checked);
4) Using $.inArray(), check for any unchecked available
var isAvailable = $.inArray(false, chked);
this returns -1 is any of the 2 checkbox has value true otherwise 0
finally,
$('.grp:checkbox').change(function () {
var obj = $(this).parent().nextAll("td").slice(0, 2);
var chked = [];
$.each(obj, function (i, j) {
chked.push($(j).find('input')[0].checked);
});
var isAvailable = $.inArray(false, chked);
console.log(isAvailable);
if (chked.length != 0 && isAvailable == -1) {
return false;
} else {
if ($(this).is(":checked")) {
//$(this).removeClass('grp');
obj.find(":checkbox").prop('checked', true);
obj.find(":checkbox").prop('disabled', true);
} else {
obj.find(":checkbox").prop('checked', false);
obj.find(":checkbox").prop('disabled', false);
}
}
});
JSFiddle
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();
}