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....
});
Related
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);
}
});
});
});
i created a table and a checkbox for each column of this table in a sidebar to show or hide that column and also a select all checkbox.
problem is all checkboxes work fine , but select all checkbox works only visually ,it checks all the checkboxes but it doesn't show or hide all the columns as it should.
this is checkbox code :
$(document).ready(function() {
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});
and select all checkbox code :
$('#select-all').on('change', function (e) {
var $inputs = $('#checkboxlist input[type=checkbox]');
if (e.originalEvent === undefined) {
var allChecked = true;
$inputs.each(function () {
allChecked = allChecked && this.checked;
});
this.checked = allChecked;
} else {
$inputs.prop('checked', this.checked);
}
});
1st: Up to Difference between change and click event of checkbox you need to replace your click event by a change event
$("input:checkbox").change(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
2nd: Up to trigger the change event you'll need to use .change() or .trigger('change').
$inputs.prop('checked', this.checked).change();
$("input:checkbox").on('change',function() {
This should work fine...
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();
I am trying to allow clicking on a div that contains a checkbox to cause that checkbox to be selected. Whenever the checkbox is selected, its parent div changes color. When unselected, the parent div's background color goes back to the original one.
Problem: The behavior when clicking on the checkbox's div is correct. However, when clicking on the checkbox directly, the behavior is opposite of what is desired. I suspect this is due to double clicking: The checkbox's own click handler fires, as well as the click handler for its parent div. I may be wrong here. How can I fix it?
JS
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function() {
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
HTML
<div class="organizer_listing">
<div class="organizer_listing_checkbox_container_container">
<div class="organizer_listing_checkbox_container" data-listing_id=1234>
<input type="checkbox" class="organizer_listing_checkbox" />
</div>
</div>
</div>
EDIT: Swapped the background colors + e.stopPropagation()
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
$(':checkbox', this).trigger('click');
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
You might want to try using a label and then use a change handler on the check box. Clicking on a label associated with a checkbox is functionally the same as clicking on the checkbox. By using a change handler, you process all the events where the value of the checkbox changes.
<style>
.organizer_listing_checkbox_container {
display: block;
}
</style>
<script type="text/javascript">
$(function() {
$(".organizer_listing_checkbox").on('change',function() {
if ($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
});
</style>
<div class="organizer_listing">
<div class="organizer_listing_checkbox_container_container">
<label class="organizer_listing_checkbox_container" for="listing_checkbox_0" data-listing_id=1234>
<input id="listing_checkbox_0" type="checkbox" class="organizer_listing_checkbox" />
</label>
</div>
</div>
I kind of went crazy and rewrote most of the code (demo):
var update = function($el){
// cycle through all elements
$el.each(function(){
var bkgd = $(this).prop('checked') ? "#FAFAFA" : "#FFF";
$(this).closest('.organizer_listing_checkbox_container_container')
.css('background-color', bkgd);
});
};
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
var check = $(':checkbox', this);
check.prop('checked', !check.prop('checked') );
update( check );
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();
update( $(this) );
});
// update on initialization
update( $(".organizer_listing_checkbox") );
Use the on() to bind events (jQuery 1.7+). The following method will:
Toggle colours on change of the checkbox (Use change instead of click to allow keyboard-initiated state changes).
Toggle the check state on clicking the <div>
Demo: http://jsfiddle.net/sPb9f/1/
// Click checkbox when its container is clicked
$('.organizer_listing').on('click', '.organizer_listing_checkbox_container_container', function(event) {
if ($(event.target).hasClass('organizer_listing_checkbox')) {
return; // Do nothing (checkbox)
}
$(':checkbox', this).each(function(){
this.checked = !this.checked; // Swap check state
}).trigger('change');
}).on('change', '.organizer_listing_checkbox', function(event) {
// Highlight row on selecting Checkbox
var $this = $(this),
$main_listing = $this.closest('.organizer_listing');
if (this.checked) {
$main_listing.css('background-color', "red");
} else {
$main_listing.css('background-color', "yellow");
}
});
You have just to stop propagation:
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();//so the click will not propagate to the div parent
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FFF");
} else {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
}
});
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();
}
});
});