We Keep Coding

Enable Dropdown Selection Using a Checkbox, Toggle Dependent Dropdown and DIV Visibility

I have an interesting scenario involves using a checkbox to enable the a dropdown. Upon changing the status of the 1st dropdown, it should enables the 2nd dropdown. Once a selection is made in the 2nd dropdown, it toggles the visibility of 2 hidden DIVs. Like the image below:
I have a prototype JSFIDDLE that I've been working on but there are a few issues with the script, such as:
1- Despite the dropdowns contain the "disabled" attribute, which should be enabled only once the checkbox is checked, but it only works if you click the checkbox 2 times. Here's the script:
var $checkBox = $('#mondayTransfer'),
$select = $('#mondayOptions');
$checkBox.on('change',function(e){
if ($(this).is(':checked')){
$select.removeAttr('disabled');
}else{
$select.attr('disabled','disabled');
}
});
2- The 2nd Selection dropdown should also be disabled; changes to the 1st Selection dropdown would enable it. Here's the script:
$(function(){
$('select').change(function(){
if($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function(){
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
3- Once the checkbox is unchecked, all the dropdowns should be disabled.
I would appreciate any help.

I refactored you code a little bit, you can test it here
let $checkBox = $('#mondayTransfer');
let divClasses = ['.ach', '.flash'];
let selects = ['#mondayOptions', '#box_g2'];
let setDisplayNone = function(className) {
divClasses.forEach(function(className) {
$(className).css("display", 'none');
});
}
$checkBox.on('change',function(e){
if ($(this).is(':checked')){
$('#mondayOptions').removeAttr('disabled');
} else {
// Disable both selects when mondayOptions is CHECKED
$('select').attr('disabled','disabled');
// Loop through each div you can select and set its display none
setDisplayNone(divClasses)
// Loop each select you have and then select the "selected" option
selects.forEach(function(className) {
$(className).val('selected');
});
}
});
$(document).ready(function() {
// When mondayOption is changed enable the second drop-down
$("#mondayOptions").change(function() {
$("#box_g2").attr("disabled", false)
});
// When the second drop-down changes its value
$("#box_g2").change(function() {
// set display none to all toggleDiv
setDisplayNone(divClasses)
// fetch the value selected
let className = $(this).val();
// use jquery to select the div and set the display yo block
$('.' + className).css('display', 'block')
});
});
If you remove all the code from //Enable drop-down Selection section of your snippet you would get part of the behaviour that you wanted to.
Anyhow here is how it is working now:
When the checkbox is CHECKED:
Enable the first drop-down.
When the checkbox is IS NOT CHECKED:
Disabled both selects
Make all .divToggle not visible by using the setDisplayNone function
Reset the value of the selects to the default value("selected" in your case)
When you select a value on the second drop-down:
Make all .divToggle not visible by using the setDisplayNone function
fetch the value selected
use jquery to select the div and set the display yo block

Check this working demo: http://jsfiddle.net/wth8mrLa/
Updated some of your scripts;
1) moved the scripts inside DOM ready
2) added select box2 variable $select2 = $('#box_g2');
3) when checkbox uncheck, disable both select boxes, reset null values and hide div
the rest scripts are the same.
JQUERY
//Toggle DIV Visibility Using the 2nd Dropdown Selection
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".divToggle").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".divToggle").hide();
}
});
}).change();
//Toggle 1st Selection Dropdown Once Checkbox is Checked
var $checkBox = $('#mondayTransfer'),
$select = $('#mondayOptions'),
$select2 = $('#box_g2');
$checkBox.on('change', function(e) {
if ($(this).is(':checked')) {
$select.prop('disabled', false);
} else {
$select.val('').prop('disabled', true);
$select2.val('').prop('disabled', true);
$(".divToggle").hide();
}
});
//Enable DropDown Selection
$(function() {
$('select').change(function() {
if ($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default') {
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if (val != 'Default' || val != 'Disabled') {
$('select option[value="' + val + '"]').not(this).prop('disabled', true);
}
});
}
});
});
});

All of your js codes must be inside the document.ready() functions.
$(document).ready(function() {
//paste your code here....
});

How to disable a selected option if is selected already with a same name input fields?

I am working in my website http://openacessjournal.com
One thing is that the first input field is static after that second and third input field is created by jQuery,
When I am trying to using onchange() function, the function is working for only first static input fields, not for all.
My code is as below:
$(document).ready(function() {
$("select[name='author_number[]']").each(function() {
$(this).change(function() {
alert($(this).val());
var selected = $("option:selected", $(this)).val();
var thisID = $(this).prop("id");
$("select[name='author_number[]'] option").each(function() {
$(this).prop("disabled", false);
});
$("select[name='author_number[]']").each(function() {
if ($(this).prop("id") == thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
});

If you're dynamically creating 2 input (or more) fields, they need to be binded since they were not in the DOM on initial page load ($(document).ready()).
$(document).ready(function() {
$('body').on('change', 'select[name="author_number[]"]', function() {
alert($(this).val());
var selected = $("option:selected", $(this)).val();
var thisID = $(this).prop("id");
$("select[name='author_number[]'] option").each(function() {
$(this).prop("disabled", false);
});
$("select[name='author_number[]']").each(function() {
if ($(this).prop("id") == thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});

Input double when click

I have modal and drop down input..
when Drop Down click text in button drop-down has append text into text field..
if input first time success, no problem, but..
if modal close and open modal again, when drop down click, value in input field double..
JS:
$("#test").on("click", 'td', function() {
var usr = $(this).text();
$("#s").val(function() {
return this.value + usr;
});
});

$("#test").on("click", 'td', function() {
var usr = $(this).text();
if($("#s").val()){
$("#s").reset();
}
$("#s").val(function() {
return this.value + usr;
});
});

Remove Select option after doing the action

I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});

Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.

You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO

Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});

one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.

You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();

Why isn't my checkbox change event triggered?

I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>

The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});

Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});

you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});