I want to make a script which will disable a select form element upon checking desired checkbox. Since there will be more times I will use this, I wanted to make it as a function which takes target selection id as an argument. The problem is, this function doesn't work when I'm passing the id as argument. On the contrary, it seems to work with hard-coded id.
<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">
function toggleSelection(id){
var el = '#' + id;
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
toggleSelection('worldSelect');
$('#worldcb').click(toggleSelection);
});
You can't invoke the same function twice and expect the function to remember the id variable.
However you could do something like this:
function toggleSelection(e){
var el = '#' + e.data;
console.log(arguments);
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
$('#worldcb').click('worldSelect', toggleSelection);
});
Fiddle: http://jsfiddle.net/4ZBne/1/
How about:
$('#worldcb').click(function() {
toggleSelection('worldSelect', $(this).is(':checked'));
});
function toggleSelection(sel, chk) {
$('#' + sel).attr('disabled', chk);
}
jsFiddle example.
The toggleSelection() function takes two arguments, sel - the ID of the select box and chk, the checkbox to use.
Related
I am using JQuery DataTables to allow the user the ability to set stores as Active (checked) or inActive (not checked). I need a way of capturing the ID (hidden column) and the check value (checked or unchecked).
I have this function which I thought would do it, but nothing is being written tot he console.
$('#tblAddRemoveStores').on('change', 'tbody input.editor-active', function () {
var data = table.row( $(this).parents('tr') ).data();
cb = $(this).prop('checked');
console.log(data.id + ' ' + cb);
});
And here is a codepen of full syntax that illustrates what I'm after.
https://codepen.io/chalupabatman/pen/VwwyaYv
Try this:
$('#tblAddRemoveStores').on('change', 'tbody input.checkbox_checked', function () {
if($(this).is(':checked')){
console.log("checked");
} else {
console.log("unchecked");
}
var id = $(this).parent().parent().find("td:first").text();
console.log(id);
});
https://codepen.io/tshenolo/pen/abbEmzY
Not the best solution but it will get you started. I hope this helps.
I've checkbox list that load by ajax and I want to show the checked value in page while user checking each checkbox. Please see below image.
Hear That country and City load from the ajax according to the parent selection. Here there are 4 cites are checked and I want to show those all selected city values below the check boxes.
I've used below jquery code but it doesn't work.
$("#cites input[type='checkbox']").click(function(){
var checkedc = $(this).val();
$('#show_city').html(checkedc);
});
Use .on()
You have to use Event Delegation
Syntax
$( elements ).on( events, selector, data, handler );
like this
$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event
if (this.checked) {// check if the checkbox is checked
var checkedc = this.value;
$('#show_city').html(checkedc);
}
});
or
$('parentElementPresesntAtDOMready').on('click','#cites input[type="checkbox"]',function(){
// code here
});
Updated After OP's comment
.map()
$(document).on('change', '#cites input[type="checkbox"]', function () {
var checkedc = $('#cites input[type="checkbox"]:checked').map(function () {//use map to create array of checked elements
return this.value;
}).get().join(); //than join array with comma to string
$('#show_city').html(checkedc);
});
I'm completing Tushar's answer so that you get all the checked cities :
$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event
var listChecked = "";
if (this.checked) {// check if the checkbox is checked
if (this.checked) {
var value = $(this).val();
listChecked = listChecked + value + ";";
}
}
$('#show_city').html(listChecked);
});
I have dynamically created a list of checkboxes inside a table:
$("#employeeRegister").append('<tr><td><input type="checkbox" class = "check" name ="chk'+i+'" value="'+this.employeeMobileNo+'$'+this.employeeEmailId+'" </td></tr>');
The above code runs 10 times inside a loop to generate 10 checkboxes dynamically.
I tried using this below code to see if a checkbox is checked.
$(document).ready(function () {
$(document).on("click", "#smsbutton", function () {
console.log('alert');
$("input:checkbox[name=type]:checked").each(function () {
alert(checked);
});
});
});
smsbutton is a button on whose click event I want to get checkboxes that are checked. But it does not work. What do I do to get all checked checkboxes?
Try this:
$("input.check:checked").each(function() {
alert(this.name + " is checked");
});
just use an attribute selector like
$(document).on("click","#smsbutton", function(){
$('input[type="checkbox"]:checked');
console.log($('input[type="checkbox"]:checked').serialize());
});
OR
$(document).on("click","#smsbutton", function(e){
if (e.handled !== true) {
e.handled = true;
e.preventDefault();
$('input[type="checkbox"]:checked').each(function() {
console.log(this.value);
});
}
});
I would like to know why jQuery's .val() function is not setting the value of the <select> control for me after I called replaceWith, but it is working otherwise.
Please see here for a (not) working example.
<select><option>ABC</option><option>DEF</option></select>
<input type="button" onclick="ControlOff()" value="Turn Off Control" />
<input type="button" onclick="ControlOn()" value="Turn On Control" />
<input type="button" onclick="Test()" value="Value Setting Test" />
function ControlOff() {
$('select').each(function () {
$(this).replaceWith('<span class="select-type">' + $(this).val() + '</span>');
});
}
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$(this).val(selected);
});
}
function Test() {
$('select').val('DEF');
}
The problem is, that $(this) in $(this).val(selected) refers to the removed <span> element, not your new element. You need to replace it with:
$('select').val(selected);
to grab the previously inserted new element.
Also, your code is unecessarily complex, this does the same thing, but simpler:
function ControlOn() {
$selectText = $('.select-type');
var selected = $selectText.text();
$selectText.replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$('select').val(selected); // Use an id instead to match: #my-select-id
}
Make sure to give the <select> element an ID, otherwise it's going to mess up once you introduce a new <select> element somewhere else on the page.
See here for a working example.
The problem is that in ControlOn you have an each which is looping over .select-type elements which are span's and spans cannot be set with the val method:
You can fix this by changing the method to this:
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
var $select = $('<select><option>ABC</option><option>DEF</option></select>');
$(this).replaceWith($select)
$select.val(selected);
});
}
Live example: http://jsfiddle.net/qSYYc/4/
set value of options will solve your problem. jsfiddle
<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
});
}
Rewrite your code like above, it would work!
The element referenced by this won't change to the select element you just created, it will always be the span element inside the scope of that function. Therefore you should set the value to the newly created select instead of the invariant $(this)!
I'd suggest you to use "disabled" attribute to turn select on and off, it, won't mess up the .val() functionality
function ControlOff() {
$("select").attr("disabled", "disabled");
}
function ControlOn() {
$("select").removeAttr("disabled");
}
When a user clicks on my radio button:
<input type="radio" name="allselect" onClick="javascript: _select('none');" />
I need the function _select(param) to find every radio button with a value of param, so 'none' in this case, and click it. How can this be done in jquery?
Since you are using jQuery:
<input type="radio" name="allselect" id="selectnone" />
JS:
$('#selectnone').click(function(){
$('input[type=checkbox]').each(function(){
if(this.value === 'none') this.checked = true;
});
});
I'd think that the following, as yet untested approach, would work:
$('input:radio').click(
function(){
var inputsOfValueEqualToNone = $('input:radio[value="none"]');
});
Making the above into a more function-based approach:
function _select(param){
if (!param){
return false;
}
else {
inputs = $('input:radio[value="' + param + '"]').click();
}
}
References:
:radio selector.
attribute-equals ([attribute="value"]) selector.
Try this
function _select(param){
var rBtns = $('input[name=' + param + ']');
rBtns.click();//Calling the click method on all the radio buttons it found
}
You can do this:
function _select(paramVal){
$('input[value=' +paramVal +']').trigger('click');
}
Use:
function _select( value ) {
var elems $('input:radio[value='+value+']'); // all the radio buttons with the value
}