We Keep Coding

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

See if check box is clicked until it is clicked

I am seeing how I can make an Are You Human checkbox, but I am having a problem (Code At The End). I am trying to make it see if it is clicked until it is clicked. I tried onclick, but that is not working.
window.onload = function() {
var input = document.getElementById('ruhuman');
function check() {
if (input.checked) {
ruhuman.checked = true;
if (event.originalEvent === undefined) {
ruhuman.human = false;
} else {
ruhuman.human = true;
}
}
alert(ruhuman.human);
alert(ruhuman.checked);
}
input.onchange = check;
check();
}
<input type="checkbox" id="ruhuman" class="ruhuman" onclick="check()" required="required">
<label>R U Human?</label>
Edit: Thanks for your help! Finished product at http://ruhuman.github.io/.
To the people that answered I can put your github for your help!

originalEvent is JQuery, not JavaScript. A workaround is to test screenX and screenY -- if it's a human, these will have some value based on the checkbox position. Also, you can remove the onclick from your html and tie your click event like this:
document.getElementById ("ruhuman").addEventListener("click", function(e){
if (this.checked) {
ruhuman.checked = true;
if (e.screenX && e.screenY) {
ruhuman.human = true;
} else {
ruhuman.human = false;
}
}
console.log(ruhuman.human);
console.log(ruhuman.checked);
});
JS Fiddle Demo

This works: https://jsfiddle.net/rz4pmp5L/3/
var input = document.getElementById('ruhuman');
var ruhuman =
{
checked: false
};
function check()
{
if (input.checked)
{
ruhuman.checked = true;
}
alert(ruhuman.checked);
}
input.onchange = check;
check();
The problem was (at least) that ruhuman was not defined at all.

jquery disable submit button unless all radio button group checked

Trying to disable a form submit button unless a selection has been made from a number of radio button groups. Have got this far, cant see why not working, button stays disabled:
<script>
$(function () {
$('#button').attr('disabled', true);
var disable = true;
$('input:radio').click(function () {
$('input:radio').each(function () {
if ($(this).is(':checked'))
disable = false;
else
disable = true;
});
});
$('#button').prop('disabled', disable == true ? true : false);
});
</script>

You should probably change the property inside the handler, and the right handler for a radio button would be onchange
$(function () {
var button = $('#button').prop('disabled', true);
var radios = $('input[type="radio"]');
var arr = $.map(radios, function(el) {
return el.name;
});
var groups = $.grep(arr, function(v, k){
return $.inArray(v ,arr) === k;
}).length;
radios.on('change', function () {
button.prop('disabled', radios.filter(':checked').length < groups);
});
});
FIDDLE

Can not post the data after validation

The code below are to validate a set of selectbox, however, it will not post and go to that post page after it pass the validation, how to fix it? I have added return true; at the end but it seems not working, Thank you.
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
return true;
});

$(':submit').click(function(e) {
//e.preventDefault(); delete this.
It's preventing the default behavior of the submit button- submitting the form...
return false Does e.preventDefault(); + e.stopPropagation();

there is something that blocks to your event listener default action
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
//e.preventDefault(); <--remove this line
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
e.preventDefault(); //<--PUT IT HERE~!!!
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
e.preventDefault(); //<-- AND PUT IT HERE~!!!
return false;
}
return true;
});

When you want to submit it you need $('form').submit().

Disable TextBox by checked Radio Button?

i created some javascript to disable input textbox when a radio button is checked and it works fine in firefox but in IE it doesn't work? What Can i Do?
the example
function display_input(inputvalue)
{
if(inputvalue == '1')
{
document.getElementById('time11').disabled = true;
document.getElementById('time12').disabled = true;
document.getElementById('date2').disabled = true;
}
else if(inputvalue == '2')
{
document.getElementById('time11').disabled = false;
document.getElementById('time12').disabled = false;
document.getElementById('date2').disabled = false;
}
}

It's possible that IE doesn't run the code until the checkbox that was checked loses input focus. This is, I believe, how IE operates its onchange method. At the end of your display_input() function, try calling blur() on the checkbox:
function display_input(inputvalue)
{
if(inputvalue == '1')
{
document.getElementById('time11').disabled = true;
document.getElementById('time12').disabled = true;
document.getElementById('date2').disabled = true;
}
else if(inputvalue == '2')
{
document.getElementById('time11').disabled = false;
document.getElementById('time12').disabled = false;
document.getElementById('date2').disabled = false;
}
// Blur focus on the checkbox...
document.getElementById('theCheckBoxId').blur();
}