Develop Reference

Disabling a button on empty <select> list?

`I've created a form that allows a user to enter their details and have their first and last names displayed along with a numerical ID. There is a 'Delete' button allowing the user to remove whatever name they select.
by default, the 'Delete' button should be disabled until the <select> list is populated. If all names are deleted from the list - the 'Delete' button should disable again.
That's where im struggling. I cant get the 'Delete' button to enable when a name is added to the list.
Below is my HTML and JavaScript:
MemberList
<h1>Member List</h1>
<form method="post" id="_frmFull">
<label for="lstMembers">Member:</label>
<select size="10"
name="lstMembers"
id="lstMembers">
</select>
<button type="button"
id="addMember"
name="Add Member">
Add Member
</button>
<button type="button"
name="Delete Member"
id="delete">
Delete Member</button>
<div id="Modal" class="modal">
<div class="modal-form">
<label for="memTitle">Title:</label>
<input list="memTitles" name="memTitles" id="memTitle">
<datalist id="memTitles">
<option value="Dr">
<option value="Mr">
<option value="Mrs">
<option value="Ms">
</datalist>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" required="required">
<label for="middleName">Middle Name (optional):</label>
<input type="text" name="middleName" id="middleName">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" required="required">
<br><br>
<label for="Country">Country:</label>
<input list="countries" name="Country" id="Country">
<datalist id="countries">
<option value="Australia">
<option value="United Kingdom">
<option value="America">
<option value="New Zealand">
</datalist>
<label for="Gender">Gender:</label>
<select name="Gender" id="Gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<label for="birthDate">Birthdate:</label>
<input type="date"
id="birthDate"
min="1900-01-01"
max="2022-12-31" required="required">
<br><br>
<div id="resiAddress">
<p>Residential Address:</p>
<br>
<label for="txtResidentialAddress">Address:</label>
<input type="text" required="required" id="txtResidentialAddress" oninput="copyAddressFields();">
<br><br>
<label for="txtResiPostCode">Postcode:</label>
<input type="text" required="required" id="txtResiPostCode">
<br><br>
<label for="txtResiSuburb">Suburb:</label>
<input type="text" required="required" id="txtResiSuburb">
<br><br>
<label for="txtResiCountry" class="country">Country</label>
<input type="text" required="required" id="txtResiCountry">
<br><br>
<label for="txtResiState">State:</label>
<input type="text" required="required" id="txtResiState">
</div>
<br><br>
<label for="chkSynchronizeAddresses">Same as residential </label>
<input type="checkbox" required="required" id="chkSynchronizeAddresses" >
<div id="postAddress">
<p>Postal Address:</p>
<br>
<label for="txtPostalAddress">Address:</label>
<input type="text" id="txtPostalAddress">
<br><br>
<label for="txtPostCode">Postcode:</label>
<input type="text" id="txtPostCode">
<br><br>
<label for="txtPostalSuburb">Suburb:</label>
<input type="text" id="txtPostalSuburb">
<br><br>
<label for="txtPostalCountry">Country:</label>
<input type="text" id="txtPostalCountry">
<br><br>
<label for="txtPostalState">State:</label>
<input type="text" id="txtPostalState">
</div>
<br><br>
<label for="txtPhone" class="phone">Phone: (optional)</label>
<input id="txtPhone" type="text">
<br><br>
<label for="txtMobile" class="mobile">Mobile: (optional)</label>
<input id="txtMobile" type="text">
<br><br>
<button type="button" name="save" id="save">Save</button>
<br><br>
<button type="button"
name="cancel"
id="closeModal">
Cancel</button>
</div>
</div>
</form>
<script>
console.log("Log test - please work!!")
const addBtn = document.getElementById("addMember");
const modal = document.getElementById("Modal");
const cancelBtn = document.getElementById("closeModal");
let chkSynchronizeAddresses = document.getElementById("chkSynchronizeAddresses");
const _frmFull = document.getElementById("_frmFull");
let Member = document.getElementById("lstMembers");
let Delete = document.getElementById("delete");
let save = document.getElementById("save");
let fName = document.getElementById("firstName");
let lName = document.getElementById("lastName");
let birthDate = document.getElementById("birthDate");
Delete.disabled = Member.value === 1;
addBtn.onclick = function (){
openPopUp();
console.log('function - correct');
}
cancelBtn.onclick = function (){
let closeTrue = confirm("Close form? You've not saved anything.")
if (closeTrue === true) {
closePopUp();
}
}
chkSynchronizeAddresses.onclick = function (){
console.log("Is this working??");
if (chkSynchronizeAddresses.checked){
document.getElementById("txtPostalAddress").setAttribute("readonly", "true");
document.getElementById("txtPostCode").setAttribute("readonly", "true");
document.getElementById("txtPostalState").setAttribute("readonly", "true");
document.getElementById("txtPostalSuburb").setAttribute("readonly", "true");
document.getElementById("txtPostalCountry").setAttribute("readonly", "true");
copyAddressFields();
}
else {
document.getElementById("txtPostalAddress").removeAttribute("readonly");
document.getElementById("txtPostCode").removeAttribute("readonly")
document.getElementById("txtPostalState").removeAttribute("readonly");
document.getElementById("txtPostalSuburb").removeAttribute("readonly");
document.getElementById("txtPostalCountry").removeAttribute("readonly");
}
}
function copyAddressFields () {
if (chkSynchronizeAddresses.checked){
document.getElementById("txtPostalAddress").value = document.getElementById("txtResidentialAddress").value;
document.getElementById("txtPostCode").value = document.getElementById("txtResiPostCode").value;
document.getElementById("txtPostalSuburb").value = document.getElementById("txtResiSuburb").value;
document.getElementById("txtPostalState").value = document.getElementById("txtResiState").value;
document.getElementById("txtPostalCountry").value = document.getElementById("txtResiCountry").value;
}
}
let idCount = 0
save.onclick = function (){
let fNameValue = fName.value
let lNameValue = lName.value
let bDateValue = birthDate.value
let pCountryValue = document.getElementById("txtPostalCountry").value
let pSuburbValue = document.getElementById("txtPostalSuburb").value
let pStateValue = document.getElementById("txtPostalState").value
let pCodeValue = document.getElementById("txtPostCode").value
let pAddressValue = document.getElementById("txtPostalAddress").value
if (fNameValue === ""){
alert("Please enter your first name to proceed");
return false;
}
else
if (lNameValue === "") {
alert("Please enter your last name to proceed");
return false;
} else if (bDateValue === "") {
alert("Please select a DOB to proceed");
return false;
} else if (pCountryValue === "") {
alert("Please enter your country to continue");
return false;
} else if (pSuburbValue === "") {
alert("Please enter your suburb to continue");
return false;
} else if (pCodeValue === "") {
alert("Please enter your postcode to continue");
return false;
} else if (pAddressValue === "") {
alert("Please enter your Address to continue");
return false;
} else if (pStateValue === "") {
alert("Please enter your state to continue");
return false;
} else {
Member.innerHTML +=
`<option value= >${idCount} ${_frmFull.firstName.value} ${_frmFull.lastName.value}<option>`
idCount++
console.log("check - is increase even working????")
}
closePopUp();
return true;
}
function closePopUp() {
modal.style.display="none";
}
function openPopUp() {
modal.style.display = "block";
}
Delete.onclick = function removeOption () {
Member.remove(Member.options);
console.log("is remove being triggered??")
}
if (Member.options.length == ""){
Delete.disabled = true
}
else {
Delete.disabled = false
}
</script>
</body>
`

The reason why the Delete button is not enabling is because the code that is supposed to enable the Delete button is only run once, when the page loads.
Assuming that this is the code that is supposed to enable the button:
if (Member.options.length == 0){ // changed from Member.options.length == ""
Delete.disabled = true
} else {
Delete.disabled = false
}
This code is only run once, when the page loads and the JavaScript code is run. In order to enable the button properly, we need to run this code every time that Member.options.length changes. One way you can do this is place the code snippet above for disabling/enabling the Delete button inside the onclick listener for the save button and to re-check every time a new user is saved. You would have to add this snippet into every place in your code where Member.options.length could change (inside the listener for the delete button as well).
Full updated code:
MemberList
<h1>Member List</h1>
<form method="post" id="_frmFull">
<label for="lstMembers">Member:</label>
<select size="10"
name="lstMembers"
id="lstMembers">
</select>
<button type="button"
id="addMember"
name="Add Member">
Add Member
</button>
<button type="button"
name="Delete Member"
id="delete">
Delete Member</button>
<div id="Modal" class="modal">
<div class="modal-form">
<label for="memTitle">Title:</label>
<input list="memTitles" name="memTitles" id="memTitle">
<datalist id="memTitles">
<option value="Dr">
<option value="Mr">
<option value="Mrs">
<option value="Ms">
</datalist>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" required="required">
<label for="middleName">Middle Name (optional):</label>
<input type="text" name="middleName" id="middleName">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" required="required">
<br><br>
<label for="Country">Country:</label>
<input list="countries" name="Country" id="Country">
<datalist id="countries">
<option value="Australia">
<option value="United Kingdom">
<option value="America">
<option value="New Zealand">
</datalist>
<label for="Gender">Gender:</label>
<select name="Gender" id="Gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<label for="birthDate">Birthdate:</label>
<input type="date"
id="birthDate"
min="1900-01-01"
max="2022-12-31" required="required">
<br><br>
<div id="resiAddress">
<p>Residential Address:</p>
<br>
<label for="txtResidentialAddress">Address:</label>
<input type="text" required="required" id="txtResidentialAddress" oninput="copyAddressFields();">
<br><br>
<label for="txtResiPostCode">Postcode:</label>
<input type="text" required="required" id="txtResiPostCode">
<br><br>
<label for="txtResiSuburb">Suburb:</label>
<input type="text" required="required" id="txtResiSuburb">
<br><br>
<label for="txtResiCountry" class="country">Country</label>
<input type="text" required="required" id="txtResiCountry">
<br><br>
<label for="txtResiState">State:</label>
<input type="text" required="required" id="txtResiState">
</div>
<br><br>
<label for="chkSynchronizeAddresses">Same as residential </label>
<input type="checkbox" required="required" id="chkSynchronizeAddresses" >
<div id="postAddress">
<p>Postal Address:</p>
<br>
<label for="txtPostalAddress">Address:</label>
<input type="text" id="txtPostalAddress">
<br><br>
<label for="txtPostCode">Postcode:</label>
<input type="text" id="txtPostCode">
<br><br>
<label for="txtPostalSuburb">Suburb:</label>
<input type="text" id="txtPostalSuburb">
<br><br>
<label for="txtPostalCountry">Country:</label>
<input type="text" id="txtPostalCountry">
<br><br>
<label for="txtPostalState">State:</label>
<input type="text" id="txtPostalState">
</div>
<br><br>
<label for="txtPhone" class="phone">Phone: (optional)</label>
<input id="txtPhone" type="text">
<br><br>
<label for="txtMobile" class="mobile">Mobile: (optional)</label>
<input id="txtMobile" type="text">
<br><br>
<button type="button" name="save" id="save">Save</button>
<br><br>
<button type="button"
name="cancel"
id="closeModal">
Cancel</button>
</div>
</div>
</form>
<script>
console.log("Log test - please work!!")
const addBtn = document.getElementById("addMember");
const modal = document.getElementById("Modal");
const cancelBtn = document.getElementById("closeModal");
let chkSynchronizeAddresses = document.getElementById("chkSynchronizeAddresses");
const _frmFull = document.getElementById("_frmFull");
let Member = document.getElementById("lstMembers");
let Delete = document.getElementById("delete");
let save = document.getElementById("save");
let fName = document.getElementById("firstName");
let lName = document.getElementById("lastName");
let birthDate = document.getElementById("birthDate");
Delete.disabled = Member.options.length == 0
addBtn.onclick = function (){
openPopUp();
console.log('function - correct');
}
cancelBtn.onclick = function (){
let closeTrue = confirm("Close form? You've not saved anything.")
if (closeTrue === true) {
closePopUp();
}
}
chkSynchronizeAddresses.onclick = function (){
console.log("Is this working??");
if (chkSynchronizeAddresses.checked){
document.getElementById("txtPostalAddress").setAttribute("readonly", "true");
document.getElementById("txtPostCode").setAttribute("readonly", "true");
document.getElementById("txtPostalState").setAttribute("readonly", "true");
document.getElementById("txtPostalSuburb").setAttribute("readonly", "true");
document.getElementById("txtPostalCountry").setAttribute("readonly", "true");
copyAddressFields();
}
else {
document.getElementById("txtPostalAddress").removeAttribute("readonly");
document.getElementById("txtPostCode").removeAttribute("readonly")
document.getElementById("txtPostalState").removeAttribute("readonly");
document.getElementById("txtPostalSuburb").removeAttribute("readonly");
document.getElementById("txtPostalCountry").removeAttribute("readonly");
}
}
function copyAddressFields () {
if (chkSynchronizeAddresses.checked){
document.getElementById("txtPostalAddress").value = document.getElementById("txtResidentialAddress").value;
document.getElementById("txtPostCode").value = document.getElementById("txtResiPostCode").value;
document.getElementById("txtPostalSuburb").value = document.getElementById("txtResiSuburb").value;
document.getElementById("txtPostalState").value = document.getElementById("txtResiState").value;
document.getElementById("txtPostalCountry").value = document.getElementById("txtResiCountry").value;
}
}
let idCount = 0
save.onclick = function (){
let fNameValue = fName.value
let lNameValue = lName.value
let bDateValue = birthDate.value
let pCountryValue = document.getElementById("txtPostalCountry").value
let pSuburbValue = document.getElementById("txtPostalSuburb").value
let pStateValue = document.getElementById("txtPostalState").value
let pCodeValue = document.getElementById("txtPostCode").value
let pAddressValue = document.getElementById("txtPostalAddress").value
if (fNameValue === ""){
alert("Please enter your first name to proceed");
return false;
}
else
if (lNameValue === "") {
alert("Please enter your last name to proceed");
return false;
} else if (bDateValue === "") {
alert("Please select a DOB to proceed");
return false;
} else if (pCountryValue === "") {
alert("Please enter your country to continue");
return false;
} else if (pSuburbValue === "") {
alert("Please enter your suburb to continue");
return false;
} else if (pCodeValue === "") {
alert("Please enter your postcode to continue");
return false;
} else if (pAddressValue === "") {
alert("Please enter your Address to continue");
return false;
} else if (pStateValue === "") {
alert("Please enter your state to continue");
return false;
} else {
Member.innerHTML +=
`<option value= >${idCount} ${_frmFull.firstName.value} ${_frmFull.lastName.value}<option>`
idCount++
console.log("check - is increase even working????")
if (Member.options.length == 0){
Delete.disabled = true
}
else {
Delete.disabled = false
}
}
closePopUp();
return true;
}
function closePopUp() {
modal.style.display="none";
}
function openPopUp() {
modal.style.display = "block";
}
Delete.onclick = function removeOption () {
Member.remove(Member.options);
if (Member.options.length == 0) {
Delete.disabled = true
}
else {
Delete.disabled = false
}
console.log("is remove being triggered??")
}
</script>
</body>

so if i understood correctly you want to toggle a button if a is populated
In that case you want to keep track of the options
You can use
document.querySelectoAll('options')
and store it in a variable
then write a function that check if there's a value in that variable and disable or enable the button based on that.
Here's a fiddle:
https://jsfiddle.net/skm7bcr6/15/

Check that after all inputs have value make button active

I want to remove the disabled attribute from the button when each field is filled out.
My code works when a single input is filled.
What am i doing wrong here?
Here are the HTML and JS
checkInput()
function checkInput() {
let input = document.querySelectorAll('.form-control')
const button = document.querySelector('.submit-btn')
input.forEach(function (e) {
let disabled = true;
e.addEventListener('keyup', function () {
if (e.value !== '') {
disabled = false
} else {
disabled = true
return false
}
if(disabled) {
button.setAttribute('disabled', 'disabled')
} else {
button.removeAttribute('disabled')
}
})
})
}
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="lastName">lastName*</label>
<input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<label for="fiscalCode">fiscalCode*</label>
<input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

It does not work because you want to have all inputs affect the state of a button, yet you only check one variable for adding/removing disabled property.
Here is a working code snippet with an example where i created an array of properties, one for each input, that i can refer to in every fired key up event
checkInput()
function checkInput() {
let input = document.querySelectorAll('.form-control')
const button = document.querySelector('.submit-btn')
const disabled = Array(input.length).fill(true);
input.forEach(function (e, index) {
e.addEventListener('input', function () {
disabled[index] = e.value === ''; // simplified if/else statement of yours
if(disabled.some(Boolean)) {
button.setAttribute('disabled', 'disabled')
} else {
button.removeAttribute('disabled')
}
})
})
}
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="lastName">lastName*</label>
<input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<label for="fiscalCode">fiscalCode*</label>
<input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>
Additionaly stoping the function execution when assigning disabled = true in the first else statement is also a wrong approach, as you most likely want to not only assign the disable value, but also the disabled property of the button.
EDIT: as mentioned in the comment by CID it is reasonable to change the event listener to input so we can handle the copying and pasting events as well

You are adding a keyup event for each input field.
that event only checks the current input field if it is empty or not.
it does not check the 3 input fields itself
this should do the trick:
checkInput()
function checkInput() {
let input = document.querySelectorAll('.form-control')
const button = document.querySelector('.submit-btn')
input.forEach(function (e) {
let disabled = true;
e.addEventListener('keyup', function () {
const emptyFields = Array.from(input).filter( input => input.value === "");
disabled = emptyFields.length > 0;
if(disabled) {
button.setAttribute('disabled', 'disabled')
} else {
button.removeAttribute('disabled')
}
})
})
}

You are enabling the submit button on keyup event of any 3 inputs. So it gets enabled on any 3 inputs.
Remove the return on disabled flow to disable button after clearing.
checkInput()
function checkInput() {
let input = document.querySelectorAll('.form-control')
const button = document.querySelector('.submit-btn')
input.forEach(function (e) {
let disabled = true;
e.addEventListener('keyup', function () {
if (e.value !== '') {
disabled = false
} else {
disabled = true
// return false <-- this makes function exit before your disable button
}
if(disabled) {
button.setAttribute('disabled', 'disabled')
} else {
button.removeAttribute('disabled')
}
})
})
}
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="lastName">lastName*</label>
<input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<label for="fiscalCode">fiscalCode*</label>
<input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

Another solution is to check if all inputs are filled out on every change in any input.
addHandlers();
// Return true if all fields are not empty
function areAllFieldsFilledOut() {
let inputs = document.querySelectorAll('.form-control');
let result = true;
inputs.forEach(e => {
if (e.value === "")
result = false;
});
return result;
}
// Add keyup event handlers to all input fields
function addHandlers() {
let inputs = document.querySelectorAll('.form-control');
const button = document.querySelector('.submit-btn');
inputs.forEach(e => {
// On each change in any input, check if all inputs are
// not empty, and if true, enable the button
e.addEventListener('keyup', e => {
let result = areAllFieldsFilledOut();
if (result) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', 'disabled');
}
});
});
}
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="lastName">lastName*</label>
<input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<label for="fiscalCode">fiscalCode*</label>
<input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>

Here is my answer:
function checkInput() {
document.querySelectorAll('input').forEach(input => {
input.addEventListener('keyup', function () {
let emptyFieldsCount = Array.from(input).filter(input => input.value == "").length;
if (emptyFieldsCount > 0) {
button.setAttribute('disabled', 'disabled')
} else {
button.removeAttribute('disabled')
}
})
});
}

jQuery form, check if radio is checked

Im having trouble getting values from the checked radio:
<form id="addform" /*action="catch.php" method="POST"*/>
<div class="form-group input-container">
<label class="col-sm-7"> *Href looks like "/vacacy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="0" type="radio" required>
<label class="col-sm-7"> *Href looks like "https://www.test.com/vacancy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="1" type="radio" required>
</div>
</form>
This is the JavaScript code:
$( "#check" ).click(function()
{
var $inputs = $('#addform :input');
var values = {};
$inputs.each(function()
{
if (this.name === "vacancy_full_URL")
{
if (/* check if radiobutton is checked */)
{
values[this.name] = $(this).val();
}
}
else
{
values[this.name] = $(this).val();
}
});
});
I'm having trouble finding the right functions to check this with. My earlier attempt if (this.checked() === true) did not work. Can you please help me?

Use is(":checked") to find if a radio button is checked. Also there are few mistakes in html form like a you have make the form self closing. Secondly there was no item with id check
$("#check").click(function(e) {
e.preventDefault()
var $inputs = $('#addform :input');
var values = {};
$inputs.each(function() {
if (this.name === "vacancy_full_URL" && $(this).is(":checked")) {
values[this.name] = $(this).val();
} else {
values[this.name] = $(this).val();
}
});
console.log(values)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addform" action="catch.php" method="POST">
<div class="form-group input-container">
<label class="col-sm-7"> *Href looks like "/vacacy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="0" type="radio" required>
<label class="col-sm-7"> *Href looks like "https://www.test.com/vacancy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="1" type="radio" required>
</div>
<button type='submit' id='check'>Click</button>
</form>

You can handle click event on button and check radion click name with :checked
$(document).ready(function(){
$("#check").click(function(){
var radioValue = $("input[name='vacancy_full_URL']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});

Please try this.
$(document).ready(function () {
$("#check").click(function () {
var values = {};
var other_data = $('input[type=radio]', $('#addform'));;
$.each(other_data, function (key, input) {
if (input.checked) {
values[input.name + "_checked"] = input.value;
} else {
values[input.name+ "_unchecked"] = input.value;
}
});
});
})

jQuery checkbox script giving odd results

Script is supposed to check all hidden checkboxes when the main checkbox attribute is checked as TRUE.
If it's left unchecked, or if user checks/unchecks, the same value should be applied for the hidden attributes.
It works fine 90% of times, but it seems in some cases (not sure how yet) it doesnt work, and some results come in where user has main checkbox as TRUE but all others as FALSE, and vice-versa.
Why does it happen?
<script>
$(function() {
var marketingMAIN= $("input[type='checkbox'][name='marketingMAIN']");
var marketingPhone = $("input[type='hidden'][name='marketingPhone']");
var marketingRobo = $("input[type='hidden'][name='marketingRobo']");
var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
var marketingIM = $("input[type='hidden'][name='marketingIM']");
var marketingPush = $("input[type='hidden'][name='marketingPush']");
var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");
marketingMAIN.on('change', function()
{
if ($(this).val() == "TRUE") {
marketingPhone.prop('checked',true);
marketingPhone.val('TRUE');
marketingRobo.prop('checked',true);
marketingRobo.val('TRUE');
marketingSMS.prop('checked',true);
marketingSMS.val('TRUE');
marketingEmail.prop('checked',true);
marketingEmail.val('TRUE');
marketingIM.prop('checked',true);
marketingIM.val('TRUE');
marketingPush.prop('checked',true);
marketingPush.val('TRUE');
marketingPaperMail.prop('checked',true);
marketingPaperMail.val('TRUE');
} else {
marketingPhone.prop('checked',false);
marketingPhone.val('FALSE');
marketingRobo.prop('checked',false);
marketingRobo.val('FALSE');
marketingSMS.prop('checked',false);
marketingSMS.val('FALSE');
marketingEmail.prop('checked',false);
marketingEmail.val('FALSE');
marketingIM.prop('checked',false);
marketingIM.val('FALSE');
marketingPush.prop('checked',false);
marketingPush.val('FALSE');
marketingPaperMail.prop('checked',false);
marketingPaperMail.val('FALSE');
}
});
});
</script>
The hidden attributes are marked as follows:
<input type="hidden" name="marketingPhone" value=""/>
<input type="hidden" name="marketingRobo" value=""/>
<input type="hidden" name="marketingSMS" value=""/>
<input type="hidden" name="marketingEmail" value=""/>
<input type="hidden" name="marketingIM" value=""/>
<input type="hidden" name="marketingPush" value=""/>
<input type="hidden" name="marketingPaperMail" value=""/>

The value won't change for a checkbox unless you specifically change it. Try using is() like in this answer.
Instead of checking the visible checkbox's value in your change listener like this:
if ($(this).val() == "TRUE") {
Check its checked attribute:
if ($(this).is(":checked")) {
Here's a working example:
$(function() {
var marketingMAIN = $("input[type='checkbox'][name='marketingMAIN']");
var marketingPhone = $("input[name='marketingPhone']");
var marketingRobo = $("input[name='marketingRobo']");
var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
var marketingIM = $("input[type='hidden'][name='marketingIM']");
var marketingPush = $("input[type='hidden'][name='marketingPush']");
var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");
marketingMAIN.on('change', function() {
if ($(this).is(":checked")) {
marketingPhone.prop('checked', true);
marketingPhone.val('TRUE');
marketingRobo.prop('checked', true);
marketingRobo.val('TRUE');
marketingSMS.prop('checked', true);
marketingSMS.val('TRUE');
marketingEmail.prop('checked', true);
marketingEmail.val('TRUE');
marketingIM.prop('checked', true);
marketingIM.val('TRUE');
marketingPush.prop('checked', true);
marketingPush.val('TRUE');
marketingPaperMail.prop('checked', true);
marketingPaperMail.val('TRUE');
} else {
marketingPhone.prop('checked', false);
marketingPhone.val('FALSE');
marketingRobo.prop('checked', false);
marketingRobo.val('FALSE');
marketingSMS.prop('checked', false);
marketingSMS.val('FALSE');
marketingEmail.prop('checked', false);
marketingEmail.val('FALSE');
marketingIM.prop('checked', false);
marketingIM.val('FALSE');
marketingPush.prop('checked', false);
marketingPush.val('FALSE');
marketingPaperMail.prop('checked', false);
marketingPaperMail.val('FALSE');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="marketingMAIN" value="" />
<input type="hidden" name="marketingPhone" value="" />
<input type="hidden" name="marketingRobo" value="" />
<input type="hidden" name="marketingSMS" value="" />
<input type="hidden" name="marketingEmail" value="" />
<input type="hidden" name="marketingIM" value="" />
<input type="hidden" name="marketingPush" value="" />
<input type="hidden" name="marketingPaperMail" value="" />
Change any of the checkboxes from type="hidden" to type="checkbox" and you can see them check and uncheck depending on what your main checkbox does.

Checkbox enable/disable file upload. When checkbox is not checked the file on record getting deleted

Sorry, now I have another problem: if the checkbox is unchecked I want the file on record to stay but every time after submit the file is getting erased from the database. Can someone help please? My code is at [JSFiddle] (jsfiddle.net/sc6ksu0m/87) 87

I found a solution to my problem. I do not know if this the best solution but it is working the way I want.
Here is the code:
HTML CODE:
Abstract:
<br>
<input name="abstract" type="text" size="40" class="style5" value="<? echo "$info[abstract]";?>"/ >
<label>
<input type="checkbox" id="confirm">
</label>
<input name="abstract" type="file" id="abstract" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span> <br>
<br>
Previous Paper or Poster:
<br>
<input name="poster" type="text" size="40" class="style5" value="<? echo "$info[poster]";?>"/>
<label>
<input type="checkbox" id="confirmp">
</label>
<input name="poster" type="file" id="poster" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span>
<br>
Resume:
<br>
<input name="resume" type="text" size="40" class="style5" value="<? echo "$info[resume]";?>"/>
<label>
<input type="checkbox" id="confirmr">
</label>
<input name="resume" type="file" id="resume" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span> <br>
And here is JavaScrip Code:
<script language="JavaScript">
window.onload = function() {
var checker = document.getElementById('confirm');
var sbm_abstract = document.getElementById('abstract');
var checkerp = document.getElementById('confirmp');
var sbm_poster = document.getElementById('poster');
var checkerr = document.getElementById('confirmr');
var sbm_resume = document.getElementById('resume');
checker.onchange = function () {
if(this.checked) {
sbm_abstract.disabled = false;
}
else {
sbm_abstract.disabled = true;
}
} ;
checkerp.onchange = function () {
if(this.checked) {
sbm_poster.disabled = false;
}
else {
sbm_poster.disabled = true;
}
};
checkerr.onchange = function () {
if(this.checked) {
sbm_resume.disabled = false;
}
else {
sbm_resume.disabled = true;
}
};
}; </script>