I have built a table with four rows and eight columns, each with a checkbox. I want only one checkbox to be allowed to check per row. I am trying to use jquery to do this. Logically, it works in jsfiddle but it does not work locally for me. I did use an alert first to make sure jQuery is being loaded first.
Here is my code below. The problem is, I can still check multiple checkboxes per row when I should only be allowed to check one:
<body>
<h2>Checkbox Test</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<script type="text/javascript">
function onLoadAlert() {
alert('Sup');
}
$(document).ready(onLoadAlert);
</script>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
<table border="1">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<div>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</div>
</tr>
</tbody>
Your input elements are not siblings, because they have different parents – the td elements:
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
That's why this doesn't work:
$(this).siblings().prop('checked', false);
Instead, do this:
$(this).closest('tr').find('input').not(this).prop('checked', false);
Fiddle 1
Alternatively, you could use radio buttons having the same name:
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
That way, you wouldn't need any JavaScript.
Fiddle 2
Would it not be a lot simpler to just do this
var checkBoxes = $('input[type=checkbox]');
$('table').on('click', 'input[type=checkbox]', function () {
checkBoxes.prop('checked', false);
$(this).prop('checked', true);
});
And you have a div inside a tr.
Related
I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method
How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});
Using ajax, how to:
loop through each table row
get the respective column checkbox value
upon finish loop, store in database (refer to Database section below)
javascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$('#btnUpdPermission').on('click', function(e) {
var id = '<?php echo $_GET['id'];?>';
$('#table_perm tbody tr').each(function(){
});
});
});
</script>
HTML
<div class="table-responsive">
<table class="table table-bordered" id="table_perm">
<thead>
<th>Permission</th>
<th>Read</th>
<th>Create</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr>
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Quotation</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Banking</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" id="btnUpdPermission">Save</button>
HTML (screenshot)
Database table design
file_id is the foreign key to the file master table (page that authorized user will access)
user_id is the foreign key to the user master table (to whom this access is granted)
rights r=read,c=create,e=edit,d=delete
1.loop through each table row
You should use .each method in combination with children.
children method gets the children of each element in the set of matched elements, optionally filtered by a selector.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
});
});
2.get the respective column checkbox value
For this you can use find method.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
let checkboxValue = $(this).find('.big-checkbox').val();
});
});
3.upon finish loop, store in database
For this, you can create an asynchronous call by sending all the information via AJAX or you can use a form by passing an action method from server-side.
If I understand it well, each row corresponds to permissions to one file master table, right? (identified by file_id in your database) If that's the case, first I'd put that id each table row (as an id, as a data-* field, etc.)...
<tr data-id="3">
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
<tr data-id="4">
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
...................
Then, considering your table structure, to loop your rows and get all the checkboxes values, one option could be...
var myPermissions = {};
$('#table_perm tbody tr').each(function() {
var sectionId = $(this).data('id');
var sectionPermissions = [];
$(this).find('input.big-checkbox:checked').each(function() {
sectionPermissions.push($(this).attr('name').charAt(0));
});
myPermissions[sectionId] = sectionPermissions.join(',');
});
So you finally get an object myPermissions with all permissions for each section...
{
3: "r,c",
4: "r,d",
5: "c,e,d"
....
}
You can send that in your ajax call as a parameter.
NOTE: Two pieces of advice in your code...
There's an error in your html, your closing td lines twice (</td></td>)
If you're going to do this collecting data with ajax and not using a form, to avoid getting the permission letter from the string name, it would be better if you assign a value to each checkbox indicating the letter of that permission. I mean...
<td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
..........
... so then would be easier and cleaner to get the value...
sectionPermissions.push($(this).val());
I hope it helps
I have an existing web application. Now I am facing a particular problem regarding some javascript. I have a list of checkbox with same classname, id and name. That means all checkbox will have the same class,name and id. Only the value will be different for each checkbox.
The code is as follows:
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Now the problem is that through javascript after checking some condition I have to set the checkbox with a specific value.
I have tried the following line of code,but it is not working.
$("#brand_id_").attr("value",'FAG').attr("checked", true);
It was setting the first checkbox. And that checkbox has a different value.
Please help me to find out a solution for this.
Thanks in advance!!
Use class selector, and check for value attribute.
$(".brand_tag[value='FAG']").attr("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Although this will work but please note that element with duplicate Ids means your HTML is invalid. Try to avoid this.
You can try this
$(".brand_tag[value=FAG]").attr("checked","checked");
First of all you need to set your check boxes with different ID's, and then you can use either class selector or ID selector or tag selector.
If you want to set the value and the checked property of all the checkboxes to 'FAG' and true respectively, use the following:
$(".brand_tag").attr("value",'FAG').attr("checked", true);
If you want to set the properties for a specific checkbox, use the ID selector after you change the ID's of your checkboxes as follows:
$("#NewID1").attr("value",'FAG').attr("checked", true);
where NewID1 is the ID of that specific checkbox that you want to modify its properties.
You can use
$("input[type=checkbox][value='FAG']").prop("checked", true);
As your code attr("value",'FAG') will change the value of checkbox
Check my examples :-)
https://jsfiddle.net/6cz22b18/4/
<table id="brand_id_table">
<tr>
<td><input type="text" id="txtInput" value="FAG"></td>
<td><button onclick="$.setCheckbox()">Check</button></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" />Austin Engineering</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" />Jeekay</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
</table>
$.setCheckbox = function() {
// reset
$("#brand_id_table").find("input:checkbox").attr('checked', false);
// set checkbox
$("#brand_id_table").find("input:checkbox").each(function() {
if($(this).val() == $("#txtInput").val()) {
$(this).attr('checked', true);
}
});
}
'$("#brand_id_table").find("input:checkbox")' is items
so, you have to use each() function that is like a 'for statement'.
I currently have a table with a checkbox and product name on one side, then a quantity input field on the other side. By default, the quantity field is disabled, but I would like to enable it only if its corresponding product is checked.
I'm still new to jQuery and a bit stuck on this, so this is a best I could come up with:
$(document).ready(function(){
//enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', 'true');
$(".product").on('click', function(){
$next = $(this).next();
$next.prop('disable', 'false');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' id='product' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' id='quantity'></td>
</tr>
</tbody>
</table>
You have duplicate IDs for input element. IDs must be unique. you can rather use classname and then use class selector to target element by classname.
And your solution is not working because
1) you have wrong selector to target next input element. you need to traverse to closest tr and then find element with name quantity in it.
2) You are setting wrong property. you need to use disabled instead of disable :
$(".product").change(function(){
$next = $(this).closest('tr').find('[name=quantity]');
$next.prop('disabled', this.checked);
});
Working Demo
$(".product").on('change', function(){
$(this).closest('tr').find("input[name='quantity']").prop('disabled',!this.checked);
});
To get what you want you can use this two DOM traversal methods .closest() or .parents()
$(document).ready(function(){
//enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', true);
$(".product").change(function(){
$(this)
.parents('td')
.next()
.find('input')
.prop('disabled', !$(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity'></td>
</tr>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' ></td>
</tr>
<tr>
<td><input type='checkbox' class='product' name='product'><label>Product</label></td>
<td><input type='text' placeholder='0' name='quantity' ></td>
</tr>
</tbody>
</table>
First, fix your code so that you don't have duplicate IDs. It won't prevent the code from running, but it's not good HTML.
Here's how I would write the script:
$(document).ready(function(){
// Enable quantity field if product is selected
$("input[name='quantity']").prop('disabled', true);
$(".product").on('click', function() {
// Get reference to the text field in the same row with the name "quantity"
var $next = $(this).closest('tr').find('input:text[name="quantity"]');
// Enable the text field if the checkbox is checked, disable it if it is unchecked
$next.prop('disabled', ! $(this).is(':checked'));
});
});
That will enable AND disable it as required.
This approach does what you are looking for.
$(function(){
$(':checkbox').change(function(){
var prodId = $(this).data('productidckbx');
if($(this).is(':checked')) {
$('#prodquantity-' + prodId).prop('disabled', false);
} else {
$('#prodquantity-' + prodId).prop('disabled', true);
}
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th width="150">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='checkbox' id='product-1' name='product' data-productidckbx='1'>
<label>Product</label>
</td>
<td><input type='text' placeholder='0' name='quantity' id='prodquantity-1' disabled="disabled"></td>
</tr>
<tr>
<td><input type='checkbox' id='product-2' class='product' name='product' data-productidckbx='2'>
<label>Product</label>
</td>
<td>
<input type='text' placeholder='0' name='quantity' id='prodquantity-2' disabled="disabled"></td>
</tr>
<tr>
<td>
<input type='checkbox' id='product-3' class='product' name='product' data-productidckbx='3'>
<label>Product</label>
</td>
<td>
<input type='text' placeholder='0' name='quantity' id='prodquantity-3' disabled="disabled">
</td>
</tr>
</tbody>
</table>