How I can identify following checkboxes in different rows and check/uncheck them separately.
<input type="checkbox" value="F" name="eph-ds[2457][]">
<input type="checkbox" value="PR" name="eph-ds[2457][]">
<input type="checkbox" value="DPH" name="eph-ds[2457][]">
<input type="checkbox" value="F" name="eph-ds[2450][]">
<input type="checkbox" value="PR" name="eph-ds[2450][]">
<input type="checkbox" value="DPH" name="eph-ds[2450][]">
where [number] is dinamically created.
Example: If "F" is checked, uncheck "PR". If "PR" is checked, uncheck "F". If "DPH" is checked, uncheck all.
$(":checkbox").change(function() {
var current = this.value;
if (current == "F") {
$(":checkbox[value=PR]").prop("checked", false);
}
if (current == "PR") {
$(":checkbox[value=F]").prop("checked", false);
}
if (current == "DPH") {
$(":checkbox[value=F]").prop("checked", false);
$(":checkbox[value=PR]").prop("checked", false);
}
});
This code is working, but if I deselect checkbox in the second row, then checkbox in first row will be unchecked too:
Use change() function to detect when first checkbox checked or unchecked then change the checked state for second checkbox using prop().
By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.
Here's one approach: import React from "react"; import ReactDOM from "react-dom"; class App extends React. Component { // some example state state = { a: { curr: false, prev: false, disabled: false }, b: { curr: false, prev: false, disabled: false }, c: false }; toggleOthers = () => { if (this.
This will do what you have requested:
jsFiddle Working Example
var $this,num,val;
$('input[name^="eph-ds["]').click(function() {
$this = $(this);
num = $this.attr('name').split('[')[1].replace("]", "");
val = $this.val();
if (val=="F"){
$('input:checkbox[name="eph-ds['+num+'][]"][value="PR"]').prop('checked',false);
}else if (val=="PR"){
$('input:checkbox[name="eph-ds['+num+'][]"][value="F"]').prop('checked',false);
}else if (val=="DPH"){
$('input:checkbox[name="eph-ds['+num+'][]"]').not($this).prop('checked',false);
}
});
Notes:
Variables declared at top so they need not be re-declared with each checkbox click
jsFiddle adds disabling F and PR when DPH is checked (otherwise after checking the DPH box user can THEN check either PR or F).
Not necessary to query your checkboxes as groups (as suggested by previous responder)
If difficult to follow, this line can be broken up into three lines:num = $this.attr('name').split('[')[1].replace("]", "");
name = $this.attr('name'); //returns eph-ds[####][]
temp = name.split('[')[1]; //returns ####]
num = temp.replace("]", ""); //removes trailing ]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With