I am writing a jquery code which aim is to disable/enable group of checkboxes. So far I got:
Html:
<select id="Units">
<option value="Marketing" > Marketing </option>
<option value="Finance" > Finance </option>
<option value="Operations" > Operations </option>
</select>
<input type="checkbox" class="enable" onclick="check();" value="1"> chbx1
<input type="checkbox" class="dissable" onclick="check();" value="2"> chbx2
<input type="checkbox" class="dissable" onclick="check();" value="3"> chbx3
<input type="checkbox" class="enable" onclick="check();" value="4"> chbx4
JS
$("#Units").on("change", function() {
if ($(this).val() !== "Finance") {
$(".dissable").attr("disabled", "disabled");
} else {
$(".dissable").removeAttr("disabled");
}
});
But it doesn't work properly on the page load. Only after change the selected option the checkboxes react. How to improve this in order to catch selected value when the page is load and enabled/disabled checboxes with apropriate class?
$(".dissable").attr("disabled", "disabled");
$("#Units").on("change", function() {
if ($(this).val() !== "Finance") {
$(".dissable").attr("disabled", "disabled");
} else {
$(".dissable").removeAttr("disabled");
}
});
demo: http://jsfiddle.net/zgn2o40a/1/
You can trigger the change event after defining the event using .change() or .trigger('change'):
$("#Units").on("change", function() {
//rest code
}).change();
Working Demo
Try this:
$("#Units").on("change", function () {
if ($(this).val() !== "Finance") {
$(".dissable").prop("disabled", true); // Use prop instead of attr
} else {
$(".dissable").prop("disabled", false);
}
}).trigger('change');
// ^
// This will call function immedietly
Related
I currently have the below jQuery script that binds a group of check boxes when the value test is selected from the dropdown list of the select html element. As a result, the check boxes act like radio buttons where one checkbox can be checked at one time. My issue is that I need the radio buttons to go back to their default behavior when selecting another value from the select box after the test value has been selected and I can't seem to figure it out. Any help would be greatly appreciated. Please see my below javascript and html code.
$('select').on('change', function() {
$('input.example').prop('checked', false);
if(this.value == 'test')
{
alert("Hello");
$('input.example').bind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
else if(this.value != 'test')
{
alert("Bye");
$('input.example').unbind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
});
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
You can namespace your change handler so that you are referring to the same function when you unbind it. Instead of 'change' I used 'change.myChange' as the change event to distinguish it so that it can be easily unbound later. Otherwise you are actually creating an identical function then trying to unbind that instead of the one that you created and bound to the event. I hope this helps.
$('select').on('change', function() {
$('input.example').prop('checked', false);
if(this.value == 'test') {
$('input.example').bind('change.myChange', function() {
$('input.example').not(this).attr('checked', false);
});
} else if(this.value != 'test') {
$('input.example').unbind('change.myChange');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
Try this
$(function () {
$('select').on('change', function () {
$('input.example').prop('checked', false);
if (this.value == 'test')
{
alert('Hello');
$('input.example').bind('change', changeHandler);
}
else if (this.value != 'test')
{
alert('Bye');
$('input.example').unbind('change', changeHandler);
}
});
function changeHandler() {
$('input.example').not(this).attr('checked', false);
}
});
Here is the working fiddle https://jsfiddle.net/wyd2206c/
Will you expect like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('select').on('change', function() {
if(this.value == 'test')
{
$('input.example').attr('type', 'radio');
$('input.example').attr('checked', false);
}else if(this.value != 'test')
{
$('input.example').attr('type', 'checkbox');
$('input.example').attr('checked', false);
}
});
});
</script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
I have a task where I have to display seperate dropdown lists for each option in radio buttons. When I select a radio button (not selecting a radio button and then clicking on 'submit'. Just selecting(clicking on) a radio button), the corresponding dropdown list should be displayed in the side.
You want to listen to the on 'change' event, this is an example with jquery:
$('select').hide();
$('input').on('change', function(){
$('select').show();
})
I've dropped a working example into jsbin: https://jsbin.com/xohecizina/edit?html,js,output
I made an example for you here.
The example is basically the following steps:
Mark up your HTML
<label>Radio 1</label>
<input type="radio" name="group" value="1" checked />
<label>Radio 2</label>
<input type="radio" name="group" value="2" />
<label>Radio 3</label>
<input type="radio" name="group" value="3" />
<div>
<select id="drop1">
<option>DropDown 1</option>
</select>
<select id="drop2" class="no-display">
<option>DropDown 2</option>
</select>
<select id="drop3" class="no-display">
<option>DropDown 3</option>
</select>
</div>
Add CSS
.no-display {display: none;}
Add event listeners to the radio buttons that call your drop-down selecting function
var radio_buttons = document.getElementsByName("group");
for (var i = 0; i < radio_buttons.length; i++) {
radio_buttons[i].addEventListener("change", setDropDown);
}
function setDropDown() {
setDropDownsForNoDisplay();
if (this.checked) {
setDropDownForDisplay(this.value);
}
}
Add helper functions that the drop-down selecting function uses
var dropdowns = document.getElementsByTagName("select");
function setDropDownsForNoDisplay() {
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].classList.add("no-display");
}
}
function setDropDownForDisplay(x) {
if (x === "1") {
document.getElementById("drop1").classList.remove("no-display");
} else if (x === "2") {
document.getElementById("drop2").classList.remove("no-display");
} else if (x === "3") {
document.getElementById("drop3").classList.remove("no-display");
}
}
You could also use events ("onclick", "onchange") directly in the radio button markup instead of adding event listeners, but I prefer keeping my events separated from the markup.
I cannot find a perfect solution for this.
Is there a simple way to fadeIn the ".filter_on" div, if I click on a select option and/or radio button?
And by default, get this div to fade out again afterwards?
My fiddle
<div class="filter">
Filter <span class="filter_on">active</span>
</div>
<form>
<p>Vehicle?</p>
<select name="vehicle" size="2">
<option>Bike</option>
<option>Car</option>
</select>
</form>
<form>
<p>City?</p>
<input type="radio" id="all" name="city" value="All" checked>
<label for="all"> All</label></input>
<input type="radio" id="ny" name="city" value="New York">
<label for="ny"> New York</label></input>
<input type="radio" id="mh" name="city" value="Manhattan">
<label for="mh"> Manhattan</label></input>
</form>
You don't need to fadeOut since you cannot unselect from drop-down or cannot uncheck the radio button.
$('select, :radio').on('change', function() {
if ($('select option:selected').length === 0 && $(':radio:checked').val() === 'All') {
$('.filter_on').fadeOut();
} else {
$('.filter_on').fadeIn();
}
}).trigger('change');
trigger will execute this function automatically. Will fadeIn on the page load.
Demo: https://jsfiddle.net/tusharj/vyd7a2s8/1/
Demo -> http://jsfiddle.net/vyd7a2s8/4/
var defaultRadio = $(':radio:checked');
var defaultVehicle = $('[name=vehicle] option:selected');
$('[name=vehicle],[name=city]').on('change', function (e) {
var currentRadio = $(':radio:checked');
var currentVehicle = $('[name=vehicle] option:selected');
if (currentRadio[0].isEqualNode(defaultRadio[0]) && currentVehicle[0].isEqualNode(defaultVehicle[0])) {
$('.filter_on').fadeOut(500);
} else {
$('.filter_on').fadeIn(500);
}
});
Explanation - This will store the default selected values outside the function and uses them inside the click event to check the newly selected values.
This is my code and it always returns "nothing is checked" no matter if something is checked or not.
function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked) {
alert ("something is checked"); }
else {
alert("nothing is checked");
}}
I have been using the above as a test to see if I can get the code to work properly. I have multiple checkboxes with the name "selfs" and I want the dropdown selection only to reset if none of the boxes with the name "selfs" are not checked. I would assume the code would look like this but nor this or the code above works... Please help.. I new to this and I have attempted to search and it is possible this has been answered but I apologize it did not name sent to me.
What I want the code to do is this:
function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked) {
return false; }
else {
($('.CssSel').get(0).selectedIndex = 0) }
}
<form id="Service">
<input type="checkbox" name="site" id="cktmcom" onclick="isTsite()">
<input type="checkbox" name="selfs" id="ckselfc" onclick="isTsserv();isTextServC()">
<label for="checkbox">Self-Serve Classic</label><br>
<input type="checkbox" name="selfs" id="ckselfn" onclick="isTsserv();isTextServN()">
<label for="checkbox">Self-Serve Next-Gen</label><br>
<input type="checkbox" name="homeSer" id="ckhomes" onclick="isThs()">
<label for="checkbox">Home Services</label><br>
<input type="checkbox" name="mapp" id="ckmobilea" onclick="isTmApp()">
<label for="checkbox">Mobile App</label><br>
<input type="checkbox" name="checkbox" id="ckgem" onclick="isTextGem()">
<label for="checkbox">Gemini</label><br>
</form>
<form id="Service2">
<input type="checkbox" name="site" id="ckkmcom" onclick="isKsite()">
<label for="checkbox">mobile.com</label><br>
<input type="checkbox" name="selfs" id="ckKselfc" onClick="isKsserv();isKServC()">
<label for="checkbox">M Self-Serve Classic</label><br>
<input type="checkbox" name="selfs" id="ckKselfn" onClick="isKsserv();isKServN()">
<label for="checkbox">M Self-Serve Next-Gen</label><br>
<input type="checkbox" name="mapp" id="ckKmobilea" onclick="isKmApp()">
<label for="checkbox">M Mobile App</label><br>
</form>
The checkboxes with name "selfs" control the hide and show for the div = selfserve.
And I need to reset the drop down selection only if none of the "selfs" are chcked .
I have actually have 5 checkboxes that have the name selfs. The code is rather large thats why the other 3 are missing.
The HTML dropdown code is:
<div id="selfserve" style="display:none">
<select class="CssSel" style="width:175px" onChange="ssPicker()">
<option value="1" selected style="color:red;" ssSel="**Self-Serve Issue**">Select Self-Serve
Issue</option>
<option value="2" ssSel="Entire Site Down">Entire Site Down</option>
<option value="3" ssSel="Login Issues">Login Issues</option>
<option value="4" ssSel="Usage Meter Issue">Usage Meter Issue</option>
<option value="5" ssSel="Change feature Issues">Change feature Issues</option>
<option value="6" ssSel="Page Loading Issues">Page Loading Issues</option>
<option value="7" ssSel="Extreme Latency">Extreme Latency</option>
<option value="8" ssSel="Navigation Issues">Navigation Issues</option>
</select>
</div>
<input type="button" name="reset_self" value="Reset" onClick="rstSelfs()">
Not working:
Since you use jQuery, you can check if any checkboxes are not checked:
function rstSelfs() {
var chkds = $("input[name='selfs']:checkbox");
if (chks.not(":checked").length > 0) {
return false;
} else {
($('.CssSel').get(0).selectedIndex = 0)
}
}
this worked but I had to rework it a bit! thank you!
Tweaked, working:
function rstSelfs() {
var chkds = $("input[name='selfs']:checkbox");
if (chkds.is(":checked")) {
return false;
} else {
($('.CssSel').get(0).selectedIndex = 0)
}
}
getElementsByName() function returns an array of elements, not single element, so it doesn't have property checked. If there is only one element by this name you should use something like this:
document.getElementsByName("selfs")[0].checked
Or to correct your function:
function rstSelfs() {
var chkds = document.getElementsByName('selfs')[0];
if(chkds.checked) {
alert ("something is checked"); }
else {
alert("nothing is checked");
}}
Since you have more than one checkbox with same name , you will get array when you do document.getElementsByName('selfs') . Try looping through the resulting array to see if any of that is checked.
Something like this :-
var isChecked=false ;
for (i=0; i<document.Service.selfs.length;i++) {
if(document.Service.selfs[i].checked)
isChecked=true ;
}
if(isChecked) ($('.CssSel').get(0).selectedIndex = 0)
I have a checkbox select all issue. I have multiple checkbox that can be triggered by a master one.
If the master one is check then you can select any checkbox (which this works). Now my problem is when i check "none" all of them are gone even the master
What I need is not to unchecked the master. I can have as many as checkbox as I want.
Is there a solution to do this without putting an ID on each or automatically uncheck all checkbox and not the master one?
here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) { return;
} $('input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('input[type="checkbox"]').attr('checked', false); });
$('#master').click(function() { if($('#master').is(':checked')) {
return; } $('input[type="checkbox"]').attr('checked', false);
});
$('input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) { $(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<input type="checkbox" value="1" id="c1">1
<input type="checkbox" value="2" id="c2">2
<input type="checkbox" value="3" id="c3">3
<input type="checkbox" value="4" id="c4">4
<input type="checkbox" value="5" id="c5">5
Based on your code, I would add a wrapper around the check-box you want to select all/none and then give the wrapper id and inputs to select all or none.
$('#list input[type="checkbox"]').attr('checked', false);
or for jQuery 1.6+
$('#list input[type="checkbox"]').prop('checked', false);
This way, you can control all your checkboxes without affecting the "master" one.
Here's the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#master').click(function() {
if($('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#list input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) {
$(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<div id="list">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
</div>
You only need a very small modification to exclude your master.
You can do that with a .not("#master") like this:
$('#checkNone').click(function() {
$('input[type="checkbox"]').not("#master").attr('checked', false); });