We Keep Coding

How to disable an input when its sibling is checked?

I have the following code:
<table>
<tr class="name"><td><input type="hidden" value="name1" name="name"></td><td><input type="checkbox"></td></tr>
<tr class="name"><td><input type="hidden" value="name2" name="name"></td><td><input type="checkbox"></td></tr>
</table>
i was try:
$('.name').find("input[type='checkbox']").change(function(){
var check = $(this).attr('checked');
$(this).find(input[type='hidden']).attr('disable',!check )
})
i want when checkbox is checked, input type="hidden will be disable, but it working wrong with my code !

Attach a handler for 'change' event, look up for closest parent row and switch disabled property on/off depending on whether checkbox is checked.
$('input[type="checkbox"]').on('change', function() {
var $this = $(this);
var $row = $this.closest('tr');
$row.find('input[type="hidden"]').prop('disabled', this.checked);
});
Side note: Question does not contain any code that shows what you tried and as you can see answer is pretty simple.
Haven't tested it tho, you might need to switch .prop with .attr.
JSFiddle with code courtesy of Nathan Champion jsfiddle.net/3qg6Ljev
If you need more inputs in rows, then you will need to add a class to hidden input that should work in pair with checkbox and use .find('input.class') instead.

So your HTML is like;
<table>
<tr class="name">
<td><input type="hidden" value="name1" name="name"></td>
<td><input type="checkbox"></td>
</tr>
<tr class="name">
<td><input type="hidden" value="name2" name="name"></td>
<td><input type="checkbox"></td>
</tr>
</table>
Now in JS:
$(document).on('change', "[type='checkbox']", function() {
var isDisabled = $(this).closest('td').siblings().find('input').prop('disabled');
$(this).closest('td').siblings().find('input').prop('disabled', !isDisabled);
});

Trouble with event bubbling and JavaScript checkbox

I'm trying to create an HTML table with checkboxes in its leftmost column. I want to be able to select the checkbox by clicking anywhere on the <tr> element. I've gotten it to work, but I when I click the checkbox itself it doesn't change state. I've tested this in Firefox 54 (I don't care about other browsers).
I've made a JSFiddle demonstrating my problem https://jsfiddle.net/a92to0tu/
let table = document.querySelector("table");
table.addEventListener("click", function(e) {
e.preventDefault();
let tr = e.target.closest("tr");
let checkbox = tr.firstElementChild.firstElementChild;
// This doesn't work
checkbox.checked = !checkbox.checked
// This works but I don't like it
// setTimeout(function() {
// checkbox.checked = !checkbox.checked
// }, 100);
});
<table>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
</table>
<p>I can click the text/table row, but clicking the checkbox no longer works</p>

Use a label element, then you don't need any script at all.
table {border-collapse: collapse;}
td { border: 1px solid #999999;}
<table>
<tr><td><input type="checkbox" id="foo" name="foo">
<td><label for="foo">Works here too!</label>
<td><label for="foo">Works here three!</label>
</table>

You need to set a condition to make sure the click isn't targeting the checkbox:
if(e.target !== checkbox) {
let table = document.querySelector("table");
table.addEventListener("click", function(e) {
let tr = e.target.closest("tr");
let checkbox = tr.firstElementChild.firstElementChild;
if (e.target !== checkbox) {
checkbox.checked = !checkbox.checked
}
});
<table>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
</tr>
</table>
<p>I can click the text/table row, but clicking the checkbox no longer works</p>

How to add input field using jQuery and call Ajax into new input field

I am using a table with input fields. I use jQuery for adding new row/ input field, and then I want to call Ajax into new row/input field. But its not working. Because it's not filling up the condition of document.ready() function..
here is my html form:
<table>
<thead>
<tr>
<th>Account Name:</th>
<th>Branch:</th>
</tr>
</thead>
<tr>
<td>
<div>
<input type="text" name="ac_name" class="auto-search-ac">
</div>
</td>
<td>
<div>
<input type="text" name="branch">
</div>
</td>
</table>
Script for add new row in the table ( It is working perfectly) :
<script>
$(document).on("focus",'#table tr:last-child td:last-child',function() {
//append the new row here.
var table = $("#table");
table.append('<tr>\
<td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
</td>\
<td><div><input type="text" name="branch"></div>\
</td>\
</tr>');
});
</script>
Ajax call into new inserted input field:: (in first row - ajax is working nicely)
<script type="text/javascript">
$(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function( event, ui ) {
$('.auto-search-ac').val(ui.item.value);
$('#ca-id-val').val(ui.item.ca_id);
}
});
</script>
Note That :: I am using all scripts and html in Modal. In First row, everything is OK.
after adding new row by jQuery then I can not call ajax. May it could be the issue of document.ready().
Question : how may I call any script/ajax/jQuery after adding a new input field/row using jquery in html ? Thanks in Advanced.

Use class selector as you do not have element having is as auto-search-ac. After appending element, find element having class as auto-search-ac from the appended tr and initialize autocomplete
Try this:
$(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function(event, ui) {
alert(ui.item.value);
alert(ui.item.ca_id);
}
});
$(document).on("focus", '#table tr:last-child td:last-child', function() {
var table = $("#table");
var element = '<tr>\
<td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
</td>\
<td><div><input type="text" name="branch"></div>\
</td>\
</tr>';
table.append(element);
$("#table tr:last-child").find(".auto-search-ac").autocomplete({
source: "/ca-list",
minLength: 1,
select: function(event, ui) {
alert(ui.item.value);
alert(ui.item.ca_id);
}
});
});
<table id='table'>
<thead>
<tr>
<th>Account Name:</th>
<th>Branch:</th>
</tr>
</thead>
<tr>
<td>
<div>
<input type="text" name="ac_name" class="auto-search-ac">
</div>
</td>
<td>
<div>
<input type="text" name="branch">
</div>
</td>
</table>
Fiddle demo

Target and clone specific table cell, Append from top to bottom of second table

I am in trouble, I've tried to no avail to do something I'm sure is simple to most seasoned developers.
As you can see, a plus button resides in each table row.
I want to achieve a two table system where I click the plus button on the table to the left transferring the player in the left table to the right table without deleting the player in the row. The subsequent clicks of any plus button should take the player from the row in which it was clicked and fill in the next open row of the table on the right, starting from top. The click of the plus button should disable this row from being picked again, and the minus button on the right table should remove the player and restore his active status on the left table. When the table is filled up I'm trying to have the ability to add players come back with a "table is full" alert. That seems easy enough, but I've been researching this and this is what I came up with. This feels like a jquery solution to me, but I can't even get started on it. I did the best I could below. For reference think of how fanduel.com does their two table drafting system.
$(document).ready( function() {
$('.addplayer').click(function (event) {
$('tr .select').eq(0).clone().appendTo("tr .selected").after();
});
$(".remove-player").click(function (event) {
$(".selected").remove();
});
});
tr:nth-child(even) {
background-color: #e3e3e3;
color:black;
}
tr:nth-child(odd) {
background-color:black;
}
table {
border: #5a5a5a medium solid;
width: 300px;
color:white;
}
input {
cursor: pointer;
}
th {
color:white;
background-color:black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="left-table">
<th>Player</th>
<th>add</th>
<tr>
<td class="select">Player1</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player2</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player3</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player4</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
</table>
<table class="right-table">
<th>Player</th>
<th>Remove</th>
<tr>
<td class="selected"></td>
<td>
<input type="button" value="-" class="remove-player" />
</td>
</tr>
<tr>
<td class="selected"></td>
<td>
<input type="button" value="-" class="remove-player" />
</td>
</tr>
</table>

You migth want to try this:
$(document).ready( function() {
$('.right-table tr .selected').addClass('empty');
$('.addplayer').click(function (event) {
if($(".right-table tr .empty").length <= 0) {
alert("Table is full");
return;
}
var txt = $(this).closest("tr").find('.select').text();
$(".right-table tr .empty").eq(0).text(txt);
$(".right-table tr .empty").eq(0).attr("data-row",$(this).closest("tr").index());
$(".right-table tr .empty").eq(0).removeClass('empty');
$(this).attr('disabled', true);
});
$(".remove-player").click(function (event) {
var index = $(this).closest("tr").find('.selected').attr('data-row');
$(this).closest("tr").find('.selected').text("");
$(this).closest("tr").find('.selected').addClass("empty");
$('.left-table tr').eq(index).find('.addplayer').attr('disabled', false);
});
});
To run it you may visit it here: https://fiddle.jshell.net/dgu80ajz/5/

Use the following code
$(document).ready(function () {
$('.addplayer').click(function (event) {
var $player_row = $(this).closest('tr');
var $new_row = $player_row.clone();
$new_row.find('.addplayer').addClass('remove-player').removeClass('addplayer').val('-')
$new_row.data('row_num', $('.left-table').find('tr').index($player_row));
$('.right-table').find('tbody').append($new_row);
$player_row.find('.addplayer').attr('disabled', 'disabled');
});
$(".right-table").on('click', '.remove-player', function (event) {
var $row = $(this).closest('tr');
$('.left-table').find('tr').eq($row.data('row_num')).find('.addplayer').attr('disabled', false)
$row.remove();
});
});
You are basically cloning the row that the button is contained in and then putting it in your second table with a reference that can be used to delete it.
Notice the event handler for the remove-player class is a delegate event because you want to bind to the .remove-player buttons that do not yet exist in the right table.
https://jsfiddle.net/67g2cb8m/4/
for a working example

Getting Relative Values in Each Loop jQuery

I'm having an issue pulling the relative values in .each() loop in jQuery. I have a series of table rows that have an text input and a radio button next to them. I want to loop through each row, and if the radio button is selected, save the value for the text input.
However, so far whenever I run my loop, it seems to recognize that one of the radio values is selected, and then it automatically saves the first input, regardless of which row. I thought that by running through each row, the code would only be executed in that particular rows HTML -- I believe it's touching all the rows instead. Can anyone help?
Here's my jQuery:
$('#valueTable tbody tr').each( function() {
//$(this).css('background', 'blue');
if($('td input[name=DefaultVal]:checked').size() > 0){
$('td input[name=DefaultVal]:checked').parent().css('background', 'red')
selectedDefVal = $('td:first-child input[name=valueTextField]').val();
//alert(selectedDefVal)
} else {
alert('not checked')
}
});
Here's my HTML:
<table border="0" id="valueTable">
<tr>
<td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="" ></td>
<td width="70%" class="default_container">Default
<input type="radio" name="DefaultVal" checked="true" class="defaultValFind" />
</td>
</tr>
<tr>
<td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="2" ></td>
<td width="70%" class="default_container">Default
<input type="radio" name="DefaultVal" class="defaultValFind" />
</td>
</tr>
<tr>
<td width="70%" style="white-space: nowrap;"><input size="80" type="text" name="valueTextField" placeholder="Enter Value" value="fffffff" ></td>
<td width="70%" class="default_container">Default
<input type="radio" name="DefaultVal" class="defaultValFind" />
</td>
</tr>
</table>

You need to use something like $(this):
$('#valueTable tbody tr').each(function() {
if($(this).find('td input[name=DefaultVal]:checked').length){
$(this).find('td input[name=DefaultVal]:checked').parent().css('background', 'red');
selectedDefVal = $(this).find('td:first-child input[name=valueTextField]').val();
} else {
alert('not checked')
}
});

$('#valueTable tbody tr').each( function() {
//$(this).css('background', 'blue');
if($('td input[name=DefaultVal]:checked', this).size() > 0){
$('td input[name=DefaultVal]:checked', this).parent().css('background', 'red')
selectedDefVal = $('td:first-child input[name=valueTextField]', this).val();
//alert(selectedDefVal)
} else {
alert('not checked')
}
});
I thinks when using $ to select children elments, you forget to specify the parent scope. if omitted, it will be window by default. In this .each case, this will point to the tr element in every loop.