My task is what I have done but I am wondering about if the select box is not only three options... If they are 5 or 10 options so let's imagine that how the if else condition below can be...
More than that, after choosing another option, the others option's input will be returned to no value as my code.
Demo
HTML:
<table>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
<tr><td>...</td></tr>
<tr>
<td>
<select id="select_vehicle">
<option value="company_vehicle">Company Vehicle</option>
<option value="hiring_vehicle">Hiring Vehicle</option>
<option value="taxi">Taxi</option>
</select>
</td>
</tr>
<tr id="company_vehicle">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi
</td>
</tr>
<tr><td>...</td></tr>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
</table>
Javascript:
var select_vehicle = $("#select_vehicle");
// Set selected item
var set_selected_item = $(select_vehicle).val("company_vehicle");
// Hide options "Hiring Vehicle" & "Taxi"
var company_vehicle = $("#company_vehicle"); // Get id "Company Vehicle"
var hiring_vehicle = $("#hiring_vehicle"); // Get id "Hiring Vehicle"
hiring_vehicle.hide();
var taxi = $("#taxi"); // Get id "Taxi"
taxi.hide();
$(select_vehicle).on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if (valueSelected == "company_vehicle") {
company_vehicle.show();
hiring_vehicle.hide();
taxi.hide();
$("#taxi input").removeAttr('checked');
$("#hiring_vehicle input").removeAttr('checked').val("");
} else if (valueSelected == "hiring_vehicle") {
company_vehicle.hide();
hiring_vehicle.show();
taxi.hide();
$("#company_vehicle input").removeAttr('checked').val("");
$("#taxi input").removeAttr('checked');
} else {
company_vehicle.hide();
hiring_vehicle.hide();
taxi.show();
$("#company_vehicle input").removeAttr('checked').val("");
$("#hiring_vehicle input").removeAttr('checked').val("");
}
});
You can do:
$('#select_vehicle').change(function() {
var val = this.value;
$('#'+val).find('input[type="text"]').val('');
$('#'+val).find('input[type="radio"]').prop('checked',false);
$('#'+val).show().siblings('tr[id]').hide();
}).change();
Updated Fiddle
You can use the value of $("#select_vehicle") to dynamically get the id of the element to show. In the HTML add the class select_option to all of the tr's that are option holders like:
<tr id="company_vehicle" class="select_option">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle" class="select_option">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi" class="select_option">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi</td>
</tr>
Javscipt:
$("#select_vehicle").on('change', function(){
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('.select_option').hide();
$('.select_option input[type="text"]').val('');
$('.select_option input:checked').prop('checked', false);
$('#'+valueSelected).show();
}).trigger('change');
Related
I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
I have trouble to create a script that deselect a chebock when the other on the same line is selected
function uncheck1(){
document.getElementById("check1").checked = true;
document.getElementById("check2").checked = false;
document.getElementById("select").disabled = true;
}
function uncheck2(){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = true;
document.getElementById("select").disabled = false;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
As well as, obviusly, it works only the first line.
If I check the right one, the left one is unchecked and the select is enabled.
Then if I check the left one, the right one is unchecked and select is disabled.
Is there a way to be able to do the same things to other 24 lines, without having to write 2 functions for each?
Try this code
window.onload = function() { // when page loaded
var checks = document.querySelectorAll("input[name='titolare[]']");
for (var i = 0; i < checks.length; i++) { // assign to each checkbox
checks[i].onclick = function() {
var row = this.parentElement.parentElement, // the TR
checks = row.querySelectorAll("input[type=checkbox]"), // All checkboxes
sel = row.querySelector("select"); // the select in the row
sel.disabled = this.value == "0"; // whatever you clicked
checks[0].checked = this.value == "0";
checks[1].checked = this.value == "1";
}
}
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
You can replace the checkboxes with radio buttons but need to name each pair separately, e.g. using the name in the label. You can keep the existing scheme of checkboxes if you are sure the script will run on the client.
One approach is to dynamically add the click listeners and at the same time, add an index to each checkbox using a data- attribute. When a checkbox with an even index is clicked, uncheck the next odd one. If one with an odd index is clicked, uncheck the previous even one.
A similar scheme can be used for the selects, except you don't need a data- attribute as long as there are only selects matched to checkbox pairs. I've slimmed down the HTML a bit…
E.g.
function updateSelect(){
var idx = this.dataset.index;
// Uncheck related checkbox. If this one's index
// is even, uncheck next, otherwise previous
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes[idx % 2? idx - 1 : +idx +1 ].checked = false;
// Get the select elements
var selects = document.querySelectorAll('select');
// Find related select based on checkbox index
var selIdx = Math.floor(idx/2);
// Disable based on whether related checkbox index is odd or even
selects[selIdx].disabled = !(idx%2);
}
window.onload = function(){
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxes,function(cb, idx) {
cb.addEventListener('click', updateSelect, false);
// Add in index to each checkbox so it's easy to find the previous or next
cb.dataset.index = idx;
})
}
<form name="form">
<table>
<tr>
<td><input type="hidden" value="Carrizo J." name="player[]">
<td><label>Carrizo J.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
<tr>
<td><input type="hidden" value="Handanovic S." name="player[]">
<td><label>Handanovic S.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</table>
</form>
Note that NodeLists are now iterable, so you in some hosts instead of:
[].forEach.call(checkboxes, function(checkbox, index){...})
you could do:
checkboxes.forEach(function(checkbox, index){...})
But support may be lacking in many browsers in use (for the time being).
I believe this is pretty much what you're looking for, and I think the changes are self-explanatory:
function checkChange(elem) {
var elemRoot = elem.parentNode.parentNode;
elemRoot.querySelectorAll("select[name='ordine[]']")[0].disabled = !elemRoot.getElementsByClassName('memberRadio2')[0].checked;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label for="titolare1">Carrizo J.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label for="titolare2">Handanovic S.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
Note: You will need to change the logic on the server side to make use of the multiple radio values (indexed using separate names).
I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.
Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>
Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});
You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});
My purpose
When I click Check All in the first column, all check boxes in that column should be checked and the Set button should show up. While the other check boxes in other column should be unchecked. Besides, when I click Check All in the second column, the Set button in the first column will be hidden and show up in the second column and then uncheck other check boxes.
HTML CODE :
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL <input type="checkbox" id="checkAll_1"><div id="setBttn_1" style="display:none;"><input type="button" value="Set"></div></td>
<td>Check ALL <input type="checkbox" id="checkAll_2"><div id="setBttn_2" style="display:none;"><input type="button" value="Set"></div></td>
<td>Check ALL <input type="checkbox" id="checkAll_3"><div id="setBttn_3" style="display:none;"><input type="button" value="Set"></div></td>
</tr>
<tr>
<td><input type="checkbox" id="chkBox1" name="Box1" checked value="1" /></td>
<td><input type="checkbox" id="chkBox2" name="Box2" value="12"/></td>
<td><input type="checkbox" id="chkBox3" name="Box3" value="13"/></td>
<tr>
<td><input type="checkbox" id="chkBox10" name="Box1" checked value="001" /></td>
<td><input type="checkbox" id="chkBox20" name="Box2" value="182"/></td>
<td><input type="checkbox" id="chkBox30" name="Box3" value="123"/></td>
</tr>
<tr>
<td><input type="checkbox" id="chkBox11" name="Box1" value="333" /></td>
<td><input type="checkbox" id="chkBox181" name="Box2" value="184442"/></td>
<td><input type="checkbox" id="chkBox101" name="Box3" checked value="1243"/></td>
</tr>
</table>
</div>
jQuery :
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
$('[name="Box1"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_1').is(':checked')) {
$('#setBttn_1').show();
} else {
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function () {
$('[name="Box2"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_2').is(':checked')) {
$('#setBttn_2').show();
} else {
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function () {
$('[name="Box3"]').prop('checked', $(this).prop("checked"));
if($('#checkAll_3').is(':checked')) {
$('#setBttn_3').show();
} else {
$('#setBttn_3').hide();
}
});
The current result is when I click Check All in the first column, it won't uncheck other check boxes. When I click Check All in the second column, the Set button in the first column won't hide. Is it possible to go back to the previously checked option(s) just before the current selection if I unclick "Check All"?
LIVE DEMO : http://jsfiddle.net/WzuMa/142/
The problem is that prop does not fire change (with good reason, as that could cause recursive events by default).
You can simply trigger the change() event after setting prop, but you need to ensure it does not fire recursively (so added a sentinel variable):
var processing = false;
$('input[type="checkbox"]').on('change', function() {
if (!processing) {
processing = true;
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
processing = false;
}
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/143/
Update - Restore previous values on uncheck
var processing = false;
var $checkboxes = $('input[type="checkbox"]');
$checkboxes.on('change', function() {
if (!processing) {
processing = true;
if (this.checked){
// Store all answers on a data attribute
$checkboxes.each(function(){
$(this).data('lastcheck', $(this).prop('checked'));
});
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
}
else {
// Restore all the previous checked box states
$checkboxes.not(this).each(function(){
$(this).prop('checked', $(this).data('lastcheck')).removeData('lastcheck');
});
}
processing = false;
}
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/144/
You can tweak this technique to operate on rows instead, for the lower checkboxes but I have to leave something for you to do :)
You you are programmatically setting the checked property it doesn't triggers the change event handler.
To trigger the event handler, .trigger(event) function should be used.
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function() {
$('[name="Box1"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_1').is(':checked')) {
$('#setBttn_1').show();
} else {
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function() {
$('[name="Box2"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_2').is(':checked')) {
$('#setBttn_2').show();
} else {
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function() {
$('[name="Box3"]').prop('checked', $(this).prop("checked")).trigger('change');
if ($('#checkAll_3').is(':checked')) {
$('#setBttn_3').show();
} else {
$('#setBttn_3').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL
<input type="checkbox" id="checkAll_1">
<div id="setBttn_1" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_2">
<div id="setBttn_2" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_3">
<div id="setBttn_3" style="display:none;">
<input type="button" value="Set">
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
</td>
<td>
<input type="checkbox" id="chkBox2" name="Box2" value="12" />
</td>
<td>
<input type="checkbox" id="chkBox3" name="Box3" value="13" />
</td>
<tr>
<td>
<input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
</td>
<td>
<input type="checkbox" id="chkBox20" name="Box2" value="182" />
</td>
<td>
<input type="checkbox" id="chkBox30" name="Box3" value="123" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox11" name="Box1" value="333" />
</td>
<td>
<input type="checkbox" id="chkBox181" name="Box2" value="184442" />
</td>
<td>
<input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
</td>
</tr>
</table>
</div>
You can use this:
$('#allCheckboxes').find('tr').first().find(':checkbox').on('change', function(e) {
var $this = $(this),
idx = $this.closest('td').index();
$('div[id^="setBttn"]').hide();
$this.next('div').toggle(this.checked);
$('[id^="checkAll"]:checked').not(this).prop('checked', !this.checked);
$('#allCheckboxes').find('tr').not(':first').each(function() {
$(this).find(':checkbox:checked').prop('checked', !$this.prop('checked'));
$(this).find('td').eq(idx).find(':checkbox').prop('checked', $this.prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
<table width="500px">
<tr>
<td>Check ALL
<input type="checkbox" id="checkAll_1">
<div id="setBttn_1" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_2">
<div id="setBttn_2" style="display:none;">
<input type="button" value="Set">
</div>
</td>
<td>Check ALL
<input type="checkbox" id="checkAll_3">
<div id="setBttn_3" style="display:none;">
<input type="button" value="Set">
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
</td>
<td>
<input type="checkbox" id="chkBox2" name="Box2" value="12" />
</td>
<td>
<input type="checkbox" id="chkBox3" name="Box3" value="13" />
</td>
<tr>
<td>
<input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
</td>
<td>
<input type="checkbox" id="chkBox20" name="Box2" value="182" />
</td>
<td>
<input type="checkbox" id="chkBox30" name="Box3" value="123" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkBox11" name="Box1" value="333" />
</td>
<td>
<input type="checkbox" id="chkBox181" name="Box2" value="184442" />
</td>
<td>
<input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
</td>
</tr>
</table>
</div>
Try below JS for now things are hard-coded but if this solution is as expected as you then I can update it to more dynamics
$('input[type="checkbox"]').on('change', function() {
$(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
$('[name="Box1"]').prop('checked', $(this).prop("checked"));
$('[name="Box2"],[name="Box3"]').prop('checked', false);
if($('#checkAll_1').is(':checked')){
$('#setBttn_1').show();
$('#setBttn_2,#setBttn_3').hide();
}else{
$('#setBttn_1').hide();
}
});
$('#checkAll_2').change(function () {
$('[name="Box2"]').prop('checked', $(this).prop("checked"));
$('[name="Box1"],[name="Box3"]').prop('checked', false);
if($('#checkAll_2').is(':checked')){
$('#setBttn_2').show();
$('#setBttn_1,#setBttn_3').hide();
}else{
$('#setBttn_2').hide();
}
});
$('#checkAll_3').change(function () {
$('[name="Box3"]').prop('checked', $(this).prop("checked"));
$('[name="Box1"],[name="Box2"]').prop('checked', false);
if($('#checkAll_3').is(':checked')){
$('#setBttn_3').show();
$('#setBttn_1,#setBttn_2').hide();
}else{
$('#setBttn_3').hide();
}
});
My function is
If I choose the first (second or last) option, the rest option will be disabled and reset as null and all values in the selected option will be enabled as my Javascript below.
Moreover, I would like to disable textboxs as the left-hand side below whenever the taxi option has been selected.
Demo
HTML:
<table>
<tr>
<td>
<input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="abc" value="car" />Car</td>
<td>
<input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
<input type="checkbox" />Taxi</td>
</tr>
</table>
Javascript:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});
do like this:
$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
$('.textbox').prop('disabled',true);
}
else
{
$('.textbox').prop('disabled',false);
}
});
Fiddle DEMO
Using your current function, you can actually remove a lot of the current code and just do the following:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
// your other code here ...
$('input[type="text"]').prop('disabled', valueSelected === 'taxi');
});
DEMO