Develop Reference

Enable form and Disable another one at the same time

I am facing a problem and I want your help please.I have created two individual forms.The 1st has two input text and the 2nd has some checkboxes.I want on load page the 2nd to be disabled and when a checkbox is checked then the form will be enabled and the 1st will be disabled.If there isn't checkbox checked then the 1st is enabled and the 2nd disable.I hope you understand.My English isn't perfect..
Here is the jQuery I use:
//eksargirwsh is the 2nd form (with checkboxes)
//prosthiki is the 1nd form (with two input text)
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', true);
});
$(":checkbox").change(function(){
if (this.checked) {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', false);
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').prop('disabled', false);
}
}) ;
ERRORS
On load page the 2nd isn't disabled as expected
If I checked two or more checkbxes in row and unchecked them in the opposite way the 2nd form becomes disabled fact I don't want
This is the solution I found:
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
});
$(":checkbox").change(function(){
//if (this.checked){
if ($('form input[type=checkbox]:checked').size()>=1){
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').removeAttr('disabled');
}
});
And I put this on input :
disabled="disabled"

.prop('disabled',false) is not the right way to remove the disabled attribute. Please use .removeAttr('disabled') instead.

First of all, remember to init event handlers inside $(document).ready function
Secondly, to improve performance, remember to cache selectors.
Then, to make it cleaner to understand, move disable/enable logic to separate function:
$(document).ready(function() {
var $eksargirwsh = $('#eksargirwsh');
var $prosthiki = $('#prosthiki');
var $eksargirwshElements = $eksargirwsh.find('input:not([type=checkbox]), select, textarea, button');
var $prosthikiElements = $prosthiki.find('input, select, textarea, button');
$eksargirwsh.on('change', 'input[type=checkbox]', onCheckboxChange);
disableElements($eksargirwshElements, true);
function onCheckboxChange(){
if( $eksargirwsh.find('input:checked').size() == 0 ){ // no checked inputs
disableElements($eksargirwshElements, true); // disable #2
disableElements($prosthikiElements, false); // enable #1
} else {
disableElements($eksargirwshElements, false); // enable #2
disableElements($prosthikiElements, true); // disable #1
}
}
function disableElements($elements, state){
$elements.attr('disabled', state);
}
});
if you don't care so much for readability onCheckboxChange can be shortened to
function onCheckboxChange(){
var zeroChecked = $eksargirwsh.find('input:checked').size() == 0;
disableElements($eksargirwshElements, zeroChecked);
disableElements($prosthikiElements, !zeroChecked);
}

js checkbox NOT set a custom value if not checked

I am working on a form that someone else created that passes through information to Salesforce. But regardless of where it sends values to, the checkbox doesnt seem to behave as it should.
No matter checking or unchecking the checkbox, it will always output the 'xxx' value.
The javascript sets the value of another checkbox inside salesforce based on the first checkbox. If that checkbox is checked, set the 'optin' value to true, if not false.
I feel I need another line of code that says: if checkbox is checked then value=xxx. if not checked, nothing. Then based on that, the other if else can be run.
here is the html:
<input type="checkbox" value="xxx" id="industry_optin" name="industry_optin"> YES
This is the js: (it is part of a bigger part of js, so there is no close bracket)
$(document).ready(function() {
$('#industry_optin').on('change', function() {
if ($(this).prop('checked') === true) {
$('#optin').prop('checked', true);
} else {
$('#optin').prop('checked', false);
}
});

Your code has errors because of }); ending of code.
$(document).ready(function() {
$('#industry_optin').on('change', function() {
if ($(this).prop('checked') === true) {
$('#optin').prop('checked', true);
} else {
$('#optin').prop('checked', false);
}
});
});
Fiddle

Checkbox ambiguous behaviour

Application includes Jquery 1.9.1, undescore.js and jquery plagin dataTables.
My checkboxes are wrapped as follows:
<label style="top: 3px; position: relative;" class="checkbox" id="IsSpreadCheckBox">
<input type="checkbox" name="IsSpread" id="IsSpread">
<span></span>
</label>
Element label.checkbox span has background images for each case: checked, unchecked, disabled.
Jquery onclick handler for it:
$(".checkbox span").click(function () {
var backgroundContainer = $(this); //span with background image
var checkbox = backgroundContainer.parent().find("input[type='checkbox']"); //hidden checkbox itself
if (!backgroundContainer.hasClass("disabled")) {
if (backgroundContainer.hasClass("checked")) {
checkbox.removeAttr('checked').prop("checked", false);
//Also tried checkbox.removeAttr('checked') or checkbox.prop("checked", false);
backgroundContainer.removeClass("checked");
}
else {
checkbox.attr('checked', 'checked').prop("checked", true);
//checkbox.attr('checked', 'checked') or checkbox.prop("checked", true);
backgroundContainer.addClass("checked");
}
}
});
Also I've got some code for making this element disabled after page loading if needed.
While debugging that works and hidden checkbox element is checked or unchecked correctly (also checkbox image is correct). Moreover, that works fine in target browser IE 10 (server-side receives correct checkbox value), but in my FireFox 29 with FireBug while debugging on form submit I see:
$("#IsSpread").attr("checked") // checked
$("#IsSpread").prop("checked") // false
and server always receives false.
Debugging on attribute change for this element gives nothing.
If I programmatically makes it checked on $(document).ready() it always sends true condition.
Thanks!

Fiddle using .attr():
if (backgroundContainer.hasClass("checked"))
{
checkbox.removeAttr('checked');
}
else
{
checkbox.attr('checked', 'checked');
}
and later:
$('#send').click(function()
{
var checked = $('#IsSpread').attr("checked") == "checked";
alert("Sending " + checked);
});
Fiddle using .prop() (actually it is strange behaviour, but works for me):
checkbox.prop('checked', checkbox.prop('checked'));
and later:
$('#send').click(function()
{
var checked = $('#IsSpread').prop("checked");
alert("Sending " + checked);
});

Javascript iterate through all checkboxes on submit, and set attribute if changed from original value

I am trying to make a javascript function similar to the following, except it will iterate through all the checkboxes when the user clicks the submit button:
$('.checkboxstatus').click(function(){
this.setAttribute('checked',this.checked);
if (this.checked && $(this).data("def") == 0){
//checkbox has changed
this.setAttribute('changed', 'yes');
}
else if(!this.checked && $(this).data("def") == 'checked')
{
//checkbox has changed
this.setAttribute('changed', 'yes');
}
else{
//no change in checkbox
this.setAttribute('changed', 'no');
}
});
When the user clicks submit, the function should be called and it should iterate through all checkboxes and see if the checkbox is checked and see if the data-def is checked or 0. If the checkbox is checked and data-def="checked" then nothing should happen. If the checkbox state is different from the data-def then an attribute ("changed") should be added to that checkbox with value of "yes". Any suggestions on how to go about this?

Your question almost gives you the answer. You need to attach a "submit" event handler to the form, then grab all input[type=checkbox] and set the "changed" attribute accordingly.

I'm not sure I get this, but the usual way to do something like this would be to set an initial state in data, then on submit, prevent the submit action, check all the checkboxes against that initial state data variable, and see if anything changed, if it did, trigger the native submit handler ?
var boxes = $('input[type="checkbox"]').each(function() {
$(this).data('initial_state', this.checked);
});
$('form').on('submit', function(e){
e.preventDefault();
var same_same = true;
boxes.each(function() {
if ( $(this).data('initial_state') !== this.checked ) { // has changed ?
$(this).data('changed', true);
same_same = false;
}
});
if ( ! same_same ) { // diffelent
this.submit();
} else {
alert('same same, but not diffelent!');
}
});

disable form fields when checkbox is checked

In order to see the form I am referring to please go to
http://www.pazzle.co.uk/index.php?main_page=product_info&cPath=6_1&products_id=3
just add that to cart, and press checkout.
That form you see, I am trying to disable the fields below the checkbox when it is checked (the shipping details only). How can I do this?
Sorry I can't copy the code directly as it is too big.

You need to edit the javascript on the page.
http://jsfiddle.net/CPjpt/5/
Flip the checkbox a couple times and you'll see it working
<script type="text/javascript">
$(document).ready(function(){
//Initalize
if($("#shippingAddress-checkbox").attr("checked") == "checked")
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
}
else
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");
}
//Setup action
$("#shippingAddress-checkbox").click(function(){
if($(this).attr("checked") == "checked")
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
}
else
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");
}
});​
});
</script>
Basically when that checkbox is clicked set all of the input fields to have the disabled attribute equal to disabled. When the box is uncheck remote the disabled attribute.