Event based property change of other component based on components own property

[fabi2tweet]

Howto create an onclick event for an checkbox, which sets two radio boxes to disabled (greyed out) , if the checkbox is enabled an vice versa

[maxkatz]

Right now it's not possible to do both with the same check box. Today you would need to have two check boxes, one to disable and one to enable. But, we are adding a feature where you will be able to write a custom JavaScript and then you will be able to do it with just one check box.

Do you need help on how to set it up with two check boxes?

[Feeniix_]

Hi, It's been seven months since this was asked and I know you have the javascript functionality, but I'm really not much of a coder. I'm trying to create a terms and conditions page that the user has to select the checkbox which then enables a button. The problem I get is making the checkbox disable the button again if the user un-checks the box.

Help please?

[maxkatz]

Are you trying to do this in Prototypes Builder or Mobile Apps Builder? Can you post a screen shot of your app?

[Feeniix_]

Mobile Apps Builder.

I want them to select the checkbox, and have hte continue button become enabled. If they un-select the checkbox I want the continue button to become disabled.

=)

[wv.wilson75]

If you can make this result public, I would appreciate it! I need the same function in one of my apps.

[maxkatz]

Here is an example, it involves using some basic jQuery:
http://gotiggr.com/preview/24099/

On page load, I run this JavaScript to disable the button:
code
var button = Tiggr('continueButton');
button.addClass('ui-disabled');
/code

I renamed the button to 'continueButton'.

On check box click, I run this JavaScript:
code
var iagree = ($('input[type="checkbox"]').is(':checked'));
var button = Tiggr('continueButton');

if (iagree == false) {
button.addClass('ui-disabled');
}
else {
button.removeClass('ui-disabled');
}
/code

This code finds a check box, checks its value and then enables or disables the button.

Note: the way I find the check box in above code assumes that the check box element you need is the first one in the page.

Hope this helps...

[Feeniix_]

Oh, that is so cool. Works perfectly ^_^ Max you are the best!

Another question - I want to have this terms and condition page only load once when the app is first launched, and have the user agree, and then have it never bother them again. So, can I:

Have my home page on load check for local variable iAgree and see if it is true or false, and if it is false have the terms and conditions page load? Or would there be a better way of doing this?

I'm thinking code would be something like this (i'm no coder, I've been searching the web for ages lol):

var s = localStorage.getItem('iAgree');

if (s == false)
{
navigate(terms);
}
else
{
navigate(terms);
}

[Feeniix_]

erm, ignore after that 'else' bit That was me testing

[maxkatz]

Yes, Local Storage would be the way to go. If the user agreed to the terms, save a value in Local Storage. On next app load, look up the value in Local Storage and don't display the terms again (if agreed previously).