Develop Reference

Disable Submit button if none of selector options is selected

I would like to disable the Submit button on a search form that only contains select dropdowns. There are several similar questions here but I most of them deal with fields. The closest thing to my case is Disable submit button if all three of three specific dropdown fields are empty. I modified the solution supplied in JSFiddle to feature an empty option, and did get it working -- but only in JSFiddle, not on my page.
I use the same code from the proposed answer (only changed IDs):
$('#submit').attr('disabled','disabled');
$('select').change(function(){
if ( $(this).hasClass('require_one') ){
$('#submit').removeAttr('disabled');
}
});
$('#submit').click(function() {
$('#searchform').submit();
});
I add the above code right after I include the jquery.js (v. 1.9.1).
I generate the form dynamically, but in JSFiddle I use exactly what is seen in the page source: http://jsfiddle.net/cheeseus/d5xz6aw8/8/
I have no idea why I can't get it to work on the actual page, hope those more knowledgeable can help sort it out.
And, if possible, I would also like the Submit button to be disabled again if all three selects are set to blank values again.

I usually don't like using the ID(3) for CSS selector since you can have only one ID selector with that name on the document and there might be another element already with the same ID. How about using the class hierarchy instead to pinpoint the button element?
In any case you need to re-check the count everytime what you select on what is empty:
var $submitButton=$('.selector .btn');
var $selectors=$('.selector select.require_one');
$submitButton.attr('disabled','disabled');
$('.selector select.require_one').change(function(){
var $empty=$selectors.filter(function() { return this.value == ""; });
if ( $selectors.filter(function() { return this.value == ""; }).length == $selectors.length ){
$submitButton.attr('disabled','disabled');
} else
{
$submitButton.removeAttr('disabled');
}
});
$submitButton.click(function() {
$('#searchform').submit();
});
JSFiddle code here

You can just use a simple count to see if you should display the button or not. Here is jQuery code.
var count = 0;
$('.require_one').change(function() {
count++;
if (count >= 3) {
$('#submit').removeAttr('disabled');
}
});
$('#submit').attr('disabled','disabled');

I think this is because you didn't check is your document ready.
I added few improvements:
caching jquery object in variables, makes your code a bit faster (you don't look for it everytime select is beeing changes).
used recommended way of binding events - 'on' function
'disabled' is property not an attribute, jQuery has dedicated method to use
on select change - check all selects if there is any not selected, it there is - set prop disabled to true, otherwise set false.
instead of disabling submit at initialization, trigger same action you do when selected is beeing changed (if you start with option selected in all select initial state won't be disabled).
$(document).ready(function () {
var $submit = $('#submit');
var $selects = $('select.require_one');
$submit.on("click", function() {
$('#searchform').submit();
});
$selects
.on("change", function(){
var $not_selected = $selects.filter(function() {
return !$(this).val();
});
$submit.prop('disabled', $not_selected.length ? true : false);
})
.first()
.triggerHandler('change');
});

jquery click vs button executed function to find length of checkboxes

I am currently working with a JQuery function that determines if there are any checkboxes checked in my form. I'm using JQuery v1.10.2
This code works fine whenever I execute it with a button, but when I try to use a checkbox within the form to execute it, it does nothing. I've tested with a JFiddle, and that worked, but in my form, the alert does not fire. I've checked for redundant names, and my form id is unique. Could it be the div/table structures within the form causing some sort of conflict? The form is wrapped inside of a hidden div. Thanks for any help.
Below is the code:
<script>
$(document).ready(function(){
//$(".ksa_button_check").click(function(){
$(".ksa_check_k, .ksa_check_s").click(function(){
if ($("#ksaChecks input:checkbox:checked").length > 0) {
alert('is checked');
}
});
});
</script>

You could use something like this.
var checkboxes = $("input[type='checkbox']");
checkboxes.click(function() {
alert("Checkbox Is Checked");
});
http://jsfiddle.net/bowenac/aTDj6/1/
Not sure which language you are using. If you are using PHP you could check if $_POST has a value etc. If a checkbox is checked it would have $_POST data if not it would not.
Something like this.
if(isset($_POST['submit'])) {
$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {
Do something
);
};
};
Other than that I am wondering if your checkboxes are losing its state on your form submit. So yea as others said would help to see the code.

How to uncheck checkbox on back button?

Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.

For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});

You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};

Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});

Function on ANY checkbox change on the page

I'm new to JQuery in general and I want to have a function activate when ANY checkbox on the page is checked or not. Then it should check what state the checkbox is "checked" or not.
I'm not sure how to do this as all the examples I'd seen require the name of the checkbox in order to work. I'd be fine if this was in Javascript aswell.
Anyone have any ideas?

$('input[type="checkbox"]') would select all checkboxes on your page.
The following would run a function when any of your checkboxes are changed, and when checked:
$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')) {//do something}
})

Bind dynamically your checkboxes to change event, and check if they are checked, then do a function of your choice.
$(document).on("change", ".chkelement", function(){
if( $(this).is(":checked") )
{
//DO SOMETHING
}
});
I recommend use a container other than "document", as close as possible to where checkboxes will be, but you get the idea right?

Javascript code behaving differently based only on the presence of a couple of alert statements

I am using jQuery Autocomplete to do a product lookup. I am using the following code to enforce selection from a list:
$(".force-selection").blur(function(e) {
var value = $(this).val();
//check if the input's value matches the selected item
alert($(this).val());
alert($(this).data('selected-item'));
if(value != $(this).data('selected-item')) {
//they don't, the user must have typed something else
$(this)
.val('') //clear the input's text
.data('selected-item', ''); //clear the selected item
}
});
The above code ONLY works when the two alert statements are removed. Why would the behavior change based only upon the presence of a couple of alert statements?

Try switching to use the Autocomplete change event instead of the blur event.
Either as an init option when creating the Autocomplete:
$(".selector").autocomplete({
change: function(event, ui) { ... }
});
Or bind to the change event by type: autocompletechange.
$(".selector").bind("autocompletechange", function(event, ui) {
...
});

It could be caused by several issues.
If you're using Internet Explorer, the alert will cause the 'blur' event to fire on whatever field you're working in. In your sample code, it's obvious why that will cause issues. Otherwise, you're probably looking at a race condition issue.
Check out this fiddle in IE: http://jsfiddle.net/NsfKT/