We Keep Coding

How to disable all input when checkbox is checked on load with jquery

I want the input each tr disabled if its checkbox is unchecked - on page load. As I understand, I have to call a function to check if the checkbox was checked. But as my code below, it's not working.
$(function() {
fn_chkBox('.form-check-input'); //see if checked on load
function fn_chkBox() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else {
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
}
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
I want all the input in each row tr disabled when load if its checkbox is empty.

You can use the .form-check-input:not(:checked) selector to select all checkboxes that are not checked.
$(function() {
$('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

To do what you require you can simply trigger() your change event handler on the checkboxes when the page loads.
Two other things to note here. Firstly, the logic there can be simplified by providing the inverse checked property state to the prop('disabled') call. Secondly, be careful when placing your event handlers outside document.ready. If you've put the jQuery code in the head of the page you encounter issues with the event not being bound.
With all that said, try this:
jQuery($ => {
$(".form-check-input").on('change', e => {
$(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked);
}).trigger('change');
});
.form-control { width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

You can leverage your existing function and just trigger a 'change' event on load. You can also shorten your function by setting disabled to !$(this).is(':checked')
$(function() {
$('input[type=checkbox]').trigger('change')
});
$(".form-check-input").change(function() {
$(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

Google Apps Script access values from dialog box

I followed this tutorial https://yagisanatode.com/2018/06/10/google-apps-script-getting-input-data-from-a-dialog-box-in-google-sheets/ to create a dialog box in Google Sheets and print the values. However, I'd like to feed these values into a new function. If I try to access them in line 29, the code somewhat breaks. I say 'somewhat' because it still runs until line 28, but I think it doesn't execute line 28 as I can't see anything in the log.
I also noticed that it doesn't close the dialog box automatically once I add my two new lines. I assume it has something to do with the function closeIt in testUI.html, but I can't figure out what it is as I'm new to jQuery/Javascript.
code.gs
//--GLOBALS--
var ui = SpreadsheetApp.getUi();
function onOpen(e) {
// Create menu options
ui.createAddonMenu()
.addSubMenu(ui.createMenu("Admin")
.addItem("Test", "test"))
.addToUi();
};
function test() {
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutputFromFile("testUI")
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the relevant module and unit");
};
function runsies(values) {
//Display the values submitted from the dialog box in the Logger.
Logger.log(values);
//I added the two lines below because I'd like to access the values, not just print them.
var valuesAcc = values[0]["orange"]
Logger.log(valuesAcc);
};
//I'd like to run another function after runsies so I can work with the values which were inputted
//into the dialogue box.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
function form_data(){
var values = [{
"orange":$("input[name=orange]:checked").val(),
"blue":$("input[name=blue]:checked").val(),
"green":$("input[name=green]:checked").val(),
"purple":$("input[name=purple]:checked").val()
}];
google.script.run.withSuccessHandler(closeIt).runsies(values);
};
function closeIt(){
google.script.host.close()
};
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<col width="60">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<tr>
<th></th><th><strong>Unit:</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<th><strong>Module</strong></th>
<th><strong>n/a</strong></th>
<th><strong>1</strong></th>
<th><strong>2</strong></th>
<th><strong>3</strong></th>
<th><strong>4</strong></th>
<th><strong>5</strong></th>
<th><strong>6</strong></th>
<th><strong>7</strong></th>
<th><strong>8</strong></th>
</tr>
<tr>
<td>Orange </td>
<td><input type="radio" name="orange" value="na" checked></td>
<td><input type="radio" name="orange" value="1"></td>
<td><input type="radio" name="orange" value="2"></td>
<td><input type="radio" name="orange" value="3"></td>
<td><input type="radio" name="orange" value="4"></td>
<td><input type="radio" name="orange" value="5"></td>
<td><input type="radio" name="orange" value="6"></td>
<td><input type="radio" name="orange" value="7"></td>
<td><input type="radio" name="orange" value="8"></td>
</tr>
<tr>
<td>Blue </td>
<td><input type="radio" name="blue" value="na" checked></td>
<td><input type="radio" name="blue" value="1"></td>
<td><input type="radio" name="blue" value="2"></td>
<td><input type="radio" name="blue" value="3"></td>
<td><input type="radio" name="blue" value="4"></td>
<td><input type="radio" name="blue" value="5"></td>
<td><input type="radio" name="blue" value="6"></td>
<td><input type="radio" name="blue" value="7"></td>
<td><input type="radio" name="blue" value="8"></td>
</tr>
<tr>
<td>Green </td>
<td><input type="radio" name="green" value="na" checked></td>
<td><input type="radio" name="green" value="1"></td>
<td><input type="radio" name="green" value="2"></td>
<td><input type="radio" name="green" value="3"></td>
<td><input type="radio" name="green" value="4"></td>
<td><input type="radio" name="green" value="5"></td>
<td><input type="radio" name="green" value="6"></td>
<td><input type="radio" name="green" value="7"></td>
<td><input type="radio" name="green" value="8"></td>
</tr>
<tr>
<td>Purple </td>
<td><input type="radio" name="purple" value="na" checked></td>
<td><input type="radio" name="purple" value="1"></td>
<td><input type="radio" name="purple" value="2"></td>
<td><input type="radio" name="purple" value="3"></td>
<td><input type="radio" name="purple" value="4"></td>
<td><input type="radio" name="purple" value="5"></td>
<td><input type="radio" name="purple" value="6"></td>
<td><input type="radio" name="purple" value="7"></td>
<td><input type="radio" name="purple" value="8"></td>
</tr>
</table>
<input type="submit" value="Submit" class="action" onclick="form_data()" >
</div>
And I think I should use a later version of jQuery?

Accessing values from a Dialog is easily performed with google.script.run. Information can be found at Client To Server Communication.
Here's a couple of examples of dialog boxes that I've done:
Data Entry Dialog Created from Header Info on Spreadsheet
Simple Example

Javascript calculated field disappearing when being submitted to mysql

I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ

How to find the row that has certain class name in jquery?

I have a table which has hundreds of items listed like below.
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td><</tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td><</tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td><</tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td><</tr>
<tr class="discount" id="trline05"><td>5</td>
<td><input type="text" class="ordItem" id="oline05" value="10"
readonly="readonly" /></td><</tr>
....
I am trying to skip the "outofstock" row with the following each statement
$.each($('.ordItem'), function() {
if ( !$(this).hasClass(outofstock)) {
data[$(this).data('code')] = $(this).val();
}
});
how to tr row and skip that row?

So select the available rows and than select the input.
$('tr.available .ordItem').each()
$('tr.available .ordItem').each( function(){
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td></tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td></tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td></tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td></tr>
</table>
and since you did not give all the details up front, you can use not() to remove the outofstock rows
$('tr:not(.outofstock) .ordItem').each( function(){
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td></tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td></tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td></tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td></tr>
</table>

$.each($('.available .ordItem'), function(index, item) {
console.log(item);
})
This will console all the inputs with the class '.ordItem' that are children of rows with the class '.avaliable'

You can use the following code to retrieve any element with whatever class is assigned to it.
$(".your-class-name")
and save it in a variable if you need to.
let someElement = $(".your-class-name")

Jquery Sum by Group from Table/Input Data

I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>

First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.