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" />
Related
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
I have simple form:
<form action="">
<select name="gender" onchange="myFunction()">
<option value="m">male</option>
<option value="f">female</option>
</select>
<input type="hidden" name="user_id" value="1">
<input type="submit" id="save1" value="Save">
</form>
<form action="">
<select name="gender" onchange="myFunction()">
<option value="m">male</option>
<option value="f">female</option>
</select>
<input type="hidden" name="user_id" value="2">
<input type="submit" id="save2" value="Save">
</form>
JS:
function myFunction() {
$("#save").first().hide();
}
I want to hide button "Save" only if select ('gender') have changed option for each user (form).
Problem is, that when I change gender for user 2, then button for user 1 hide.
Note: there are many forms and users
Try this:
$("select").change(function() {
$(this).parent("form").find("input[type='submit']").hide();
});
Try this:
$("select").on("change", function() {
$(this).parent().children('input[type=submit]').hide();
});
Working Fiddle
Or like this:
$('form>select').change(function(e){
$(e.currentTarget).siblings("input[type='submit']").hide();
});
You should use jquery, bind action on form and trigger on 'select' box, then use siblings to find the button inside that form.
Example :
$('form').on('change', 'select', function() {
var condition = ($(this).val() && $(this).val() != ""); // true : show button, false : hide button
$(this).siblings('input[type="submit"]').toggle(condition);
})
Try this :- FIDDLE
$("select").on("change",function () {
$(this).parent().find("input[type=submit]").hide();
});
I have a checkbox at the end of 5 inputs and one dropdown. I am trying through jquery to set all the inputs and the dropdown before the checkbox to 0.
There will be many employees listed so it has to be only the ones before the checkbox.
My feeble attempt at the jquery. I have the .on as sometimes it will be called through ajax
$(document).ready(function () {
$(document).on('click', '.fasCheck', function(){
if ($(this).attr("checked") == "checked"){
$(this).prev().parent().prev(".payWeek").next('input').prop('checked', true);;
} else {
}
});
});
The html:
<div class="returns" id="employee">
<h3>David Wilson</h3>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek1">Pay Week1</label>
<input type="number" id="MonthlyReturn0PayWeek1" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week1]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek2">Pay Week2</label>
<input type="number" id="MonthlyReturn0PayWeek2" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week2]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek3">Pay Week3</label>
<input type="number" id="MonthlyReturn0PayWeek3" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week3]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek4">Pay Week4</label>
<input type="number" id="MonthlyReturn0PayWeek4" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week4]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek5">Pay Week5</label>
<input type="number" id="MonthlyReturn0PayWeek5" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week5]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeeks">Pay Weeks</label>
<select id="MonthlyReturn0PayWeeks" name="data[MonthlyReturn][0][pay_weeks]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="payWeek">
<label for="FAS">FAS</label>
<input type="checkbox" class="fasCheck" name="FAS">
</div>
</div>
$(this).attr("checked") == "checked" won't work, you already know to use .prop(). Or just use this.cecked without any jQuery.
.prev().parent() - the prev is absolutely unnecessary, all siblings do have the same parent node.
.prev(".payWeek") - seems like you want to use .prevAll() instead.
.next('input') - you don't want to find the next sibling, but a descendant. Use .children() or .find().
.prop('checked') - while appropriate for checkboxes, you have number inputs here and need to set their value, via .val().
So change it to
$(document).ready(function() {
$(document).on('click', '.fasCheck', function() {
if (this.checked) {
$(this)
.parent()
.prevAll(".payWeek")
.find('input')
.val('0');
}
});
});
From the clicked checkbox, find the closest payWeek, then select all previous payWeeks, and find all inputs within those payWeeks and set the value to zero :
$(document).ready(function () {
$(document).on('click', '.fasCheck', function(){
if ( this.checked ) {
$(this).closest('.payWeek')
.prevAll('.payWeek')
.find('input')
.val('0');
} else {
}
});
});
$(document).on('click', '.fasCheck', function(){
var $this = $(this),
$parent = $(this).parents('.returns').eq(0),
$inputs = $parent.find('input');
if ($this.prop("checked")){
$inputs.val('0');
}
});
I have this radio buttons:
<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" /><
<input type="radio" name="type" id="line" value="line" />
And I want a combobox based on seletected radio button.
<select id="Xcombo1" class="Xcombo">
<option value = "" >This options should be based on seletec radio</option>
</select>
Some code that ive already have:
$('input:radio[name=type]:checked').val(); // to get selected radio.
My question is, how can I have those options based on selected radio button ?
note: Anytime I selected a diferent radio button those options should dynamically change
Cheers.
$("input").click(function(){
if($(this).attr("checked"))
{
if(this.id == "pie")
{
$("#Xcombo1").html("<option value='1' >1</option><option value='2' >2</option>");
}
else if( this.id == "bar")
{
$("#Xcombo1").html("<option value='3' >3</option><option value='4' >4</option>");
}
else
{
$("#Xcombo1").html("<option value='5' >5</option><option value='6' >6</option>");
}
}
});
Check the below fiddle
http://jsfiddle.net/quG2S/12/
Heres an example for you to test, hopefully I understood what you wanted
HTML:
<label for="pie">PIE</label><input type="radio" name="type" id="pie" value="pie" />
<br />
<label for="bar">BAR</label><input type="radio" name="type" id="bar" value="bar" />
<br />
<label for="line">LINE</label><input type="radio" name="type" id="line" value="line" />
<br />
<br />
<select id="combopie" class="Xcombo" style="display:none;">
<option value="pie">Pie Options Here</option>
</select>
<select id="combobar" class="Xcombo" style="display:none;">
<option value="bar">Bar Options Here</option>
</select>
<select id="comboline" class="Xcombo" style="display:none;">
<option value="line">Line Options Here</option>
</select>
jQuery:
$(function () {
$('input[type=\'radio\']').click(function () {
$('select.Xcombo').hide();
$('#combo' + $(this).attr('id')).show();
});
});
Working example
HTML
<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" />
<input type="radio" name="type" id="line" value="line" />
<select id="Xcombo1" class="Xcombo">
<option value = "pie">Pie</option>
<option value = "bar">Bar</option>
<option value = "line">Line</option>
</select>
Javascript
$("input[type='radio']").click(function(){
$("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
});
This function binds a function to the click event of each radio button that uses the value of the clicked radio to select the appropriate option and set its selected property.
Normal Demo: http://jsfiddle.net/g82dB/
If you want to dynamically append the elements the following script can be used. It checks to make sure the option does not already exist, then either appends or selects.
$("input[type='radio']").click(function(){
if($("#Xcombo1 option[value='" + $(this).val() +"']").length ==0){
var option = $("<option />",{
"value": $(this).val(),
"text": $(this).val(),
"selected": "selected"
});
$("#Xcombo1").append(option);
}else{
$("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
}
});
This works with the following HTML:
Dynamic Element Example: http://jsfiddle.net/g82dB/2/
Here's an example :
$(function() {
$('input:radio[name=type]').change(function() {
var radio = $(this);
// The "change" event can be triggered for an "unselecting" radio button, so we must check it.
if (radio.is(':checked')) {
// You may want to do something else
$('#Xcombo1 option').attr('value', radio.val());
}
});
});
And a jsfiddle : http://jsfiddle.net/wNZHr/
If you want to display different options according to the selected radio button, you can create options in javascript, or you can create all options directly in your html and use show/hide to only display the options you want.
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); });