I want all other checkboxes if one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?
As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.
(".chkbox").on('change', function() {
var locked = false;
// var for current row
var row = $(this).closest('tr').index();
var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');
$(this).on('click', function toggleLock(e) {
e.preventDefault();
// Make locked true if it was false, or vice-versa
locked = !locked;
// And apply that value to the 'disabled' attribute of the checkboxes
$checkboxes.attr('disabled', locked);
});
});
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
In this demo you can also uncheck and that action will enable each checkboxes in a row
working demo: http://jsfiddle.net/darxide/vpvaseL0/
$('body').on('change' , 'tr input' , function () {
var count_checked = 0;
$(this).parent().parent().find('input:checked').each(function() {
count_checked++
})
if(count_checked > 0){
$(this).parent().parent().find('input').each(function () {
$(this).prop('disabled' , true)
})
$(this).removeAttr('disabled')
} else {
$(this).parent().parent().find("input").removeAttr('disabled')
}
})
This should work:
$(".chkbox").click(function(){
var currentObj = $(this);
$(this)
.closest("tr")
.find(".chkbox").attr("disabled","disabled");
$(currentObj).removeAttr("disabled");
});
fiddle
You can use .closest().siblings().find().prop() method in this case. Another suggestion is to use group radios:
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
Here this.checked returns boolean value. If checked true and unchecked then false.
The issue seems to me that the way you have written your code that tells to bind the click event on currently clicked check box.
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Related
I want to uncheck all checkboxes that are in one table row.
I have this HTML code :
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" checked="checked" type="checkbox">
Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox">
Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox">
Feld 3
</td>
<td>...and so on
<td>
</tr>
What I have tried at now is this jquery code:
$("tr#unlosta_line_1").children("td").each(function(i) { $(i).prop("checked", false) } )
Problem with you implementation is that, You are setting checked property of TD element not checkbox.
You can directly use :checkbox selector, then set its checked property
$("#unlosta_line_1 :checkbox").prop("checked", false);
input is the children of the td
(function (){
$("#unlosta_line_1").children("td").each(function(i) {
$(this).children('input').attr("checked", false)
})
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" type="checkbox"> Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox"> Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox"> Feld 3
</td>
<td>...and so on
<td>
</tr>
</table>
I need to show an error if none of the below checkboxes are checked using using JavaScript.
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
You can implement it using selecting all elements with some given name using document.querySelectorAll and an attribute selector using the pseudoclass :checked:
var checkedCheckboxes = document.querySelectorAll("[name='chk_stat[]']:checked");
if (checkedCheckboxes.length == 0) {
console.log("No checkbox is checked...");
}
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together
You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons
First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.
Below is my HTML code which contains multiple checkboxes with the respective values in <td>. I got the values of clicked checkboxes through php which is an array format $res[]. I want to make the checkbox disappear of which i got values and make the <td> background color to red with the value of checkbox visible. I got the values of checkboxes in php as $res[0][seat]=>4; and $res[1][seat]=>1 where 4 and 1 are values. How to do this using jQuery?
<table>
<tr>
<td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td>
</tr>
</table>
Try this:
$('.chk').on('click', function(e){
e.preventDefault();
if($(this).is(':checked')) {
$(this).hide();
$(this).closest('td').css('background-color','red');
}
});
Fiddle here
UPDATED try this:
var arr=[4,1];// array list received from php
for(i=0;i< arr.length;i++){
$('table tbody tr td input[type=checkbox]').each(function(){
if($(this).val()==arr[i]){
$(this).hide();
$(this).closest('td').css('background-color','red');
}else if($(this).is(':visible')){
$(this).closest('td').css('background-color','pink');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td></tr></table>
use filter() in jquery
var arrayValue = [4, 1];
$(".chk").filter(function () {
return arrayValue.indexOf(+this.value) != -1 // check arrayvalue is present in check box or not using indexOf
}).closest("td").css('background-color', 'red').find(".chk").hide(); // set background for closest td and hide chk
DEMO
<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
i have done it open the div above event . how to set in that event to close the opened div . also need to close div while click out of div or any action apart from div
if i opened one div need to close another one how to done it ?
actual output
I think you can hide all elements with the attribute toggle except the one that has to be opened.
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
var el = $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
$('[toggle]').not(el).hide()
})
})
Demo: Fiddle