Develop Reference

how to make checkbox unchecked when other checkbox is checked in angular

I have a table where it shows the list of deleted items.
User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.
$(function() {
$('input.example').on('change', function() {
$("tr").closest('input.example').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
<table>
<th>
<label>
<input type="checkbox" class="example" />Recover</label>
<label>
<input type="checkbox" class="example" />Delete</label>
</th>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
</table>
</div>

This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:
<div ng-app>
<table>
<th>
<label><input type="radio" name="foo1" />Recover</label>
</th>
<th>
<label><input type="radio" name="foo1" />Delete</label>
</th>
<tr>
<td>
<input type="radio" name="foo2" />
</td>
<td>
<input type="radio" name="foo2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="foo3" />
</td>
<td>
<input type="radio" name="foo3" />
</td>
</tr>
</table>
</div>

i figured it out myself without using radio buttons and its working fine.
JS code
$scope.uncheckPermDelete = function (ip) {
if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
ip.perm_delete = 0;
}
};
$scope.uncheckRecover= function (ip) {
if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
ip.deleted = 1;
}
};
HTML code
<td ><input class="recover_check" name="recover_check_{{ip.id}}" ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>

How to disable Checkbox after checking another checkbox in array

How to disable the checkbox with the name="check_no[]" after checking the checkbox name="check_yes[]"?
<tr>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_yes[]" value="yes">
</center>
</td>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_no[]" value="no">
</center>
</td>
</tr>

You can use a combination of closest() and find() to get the neighbouring child checkbox and then disable it using prop(), something like this:
$('table :checkbox').change(function() {
$(this).closest('tr').find(':checkbox').not(this).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_yes[]" value="yes">
</center>
</td>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_no[]" value="no">
</center>
</td>
</tr>
</table>

$("table [name='check_yes[]']").change(function() {
if($(this).is(":checked")) {
$("[name='check_no[]']").prop('disabled', true);
}
});
This listens for any check_yes[] check and disables all other check_no[] on the page if it was checked

function enab1() {
document.getElementById("check_no").disabled = true;
}
function enab2() {
document.getElementById("check_yes").disabled = true;
}
in your html code
<input type="checkbox" name="check_yes[]" value="yes" onclick="enab1()">
<input type="checkbox" name="check_no[]" value="yes" onclick="enab2()">
Hope this will works

How can I get hidden value by checkbox value from under the same <td> tag

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()
});

hide and show text box on click of a tr and on button click print the same in a div

I am trying to show text box on the row clicked by hiding the labels of the clicked row and on button click the text box data should be printed on a "showresult" Div
My problem is am not able to hide and show the textbox i have gathered a script which change the color but am not sure how to hide and show the text box and print the data.
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'red');
}
else {
$(this).css('background', 'white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td><label>data1</label> <input type="text" value="1" /></td>
<td><label>data2</label> <input type="text" value="2" /></td>
<td><label>data3</label> <input type="text" value="3" /></td>
<td><label>data4</label> <input type="text" value="4" /></td>
<td><label>data5</label> <input type="text" value="5" /></td>
</tr>
<tr>
<td><label>data6</label> <input type="text" value="6" /></td>
<td><label>data7</label> <input type="text" value="7" /></td>
<td><label>data8</label> <input type="text" value="8" /></td>
<td><label>data9</label> <input type="text" value="9" /></td>
<td><label>data10</label> <input type="text" value="10" /></td>
</tr>
</table>
<input type="button" value="printdata"/>
<div id="showresult"></div>

Say i have two rows, The textbox will be hidden and the label will be
available as a display when a user click on a selected row the label
should be hidden and the text box should be visible and after that if
the user clicks on the button then the data or the clicked row textbox
value should be printed #showresult
Try utilizing .toggle() to display , not display label , input elements within tr clicked element ; create variable index corresponding to tr element clicked ; at click of #printdata , iterate
tr at index using .each() , create an object having property of label , value of input , set #showresult html to created object
$(document).ready(function() {
var index = null;
$("tr").click(function() {
$("input, label", this).toggle();
index = $(this).index("tr");
});
$("input[type=button]").click(function() {
var obj = {};
var elems = $("tr").eq(index).find("label, input");
elems.each(function(i, el) {
if ($(el).is("label")) {
obj[el.textContent] = elems[i + 1].value
}
});
$("#showresult").html("<pre>" + JSON.stringify(obj, null, 2) + "</pre>")
})
});
tr td input {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tbody>
<tr style="background:transparent">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="1" />
</td>
<td>
<label>data2</label>
<input type="text" value="2" />
</td>
<td>
<label>data3</label>
<input type="text" value="3" />
</td>
<td>
<label>data4</label>
<input type="text" value="4" />
</td>
<td>
<label>data5</label>
<input type="text" value="5" />
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="6" />
</td>
<td>
<label>data7</label>
<input type="text" value="7" />
</td>
<td>
<label>data8</label>
<input type="text" value="8" />
</td>
<td>
<label>data9</label>
<input type="text" value="9" />
</td>
<td>
<label>data10</label>
<input type="text" value="10" />
</td>
</tr>
</tbody>
</table>
<input type="button" value="printdata" />
<div id="showresult"></div>

How to disable textboxs in radio button with Javascript

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