Hi,

 

I have my signup form with a checkbox to agree to the terms. Before the checkbox is ticked, the "Submit" button is disabled. As soon as the checkbox is ticked, the button is enabled.

 

Is there anyway using css, to have, for example, the following:

 

Current style code for button:

.button{
color: #000000; font-family: "Trebuchet MS", arial, verdana, sans-serif; font-size: 13px; border: 3px solid #f0eed9;; background-color: #fbf9ed;
}

 

Example for disabled button:

.button.disabled{
color: #FFFFFF; font-family: "Trebuchet MS", arial, verdana, sans-serif; font-size: 13px; border: 3px solid #f0eed9;; background-color: #000000;
}

 

Hope this is clear enough!

Use a css class one for button and one for disabledbutton, in the same script that disables/enables the button, change the style over with

 

if(need to disable){
 document.getElementById(idhere).class = "disabledbutton";
} else if (need to enable){
 document.getElementById(idhere).class = "button";

}

 

Hope the pseudo-code makes sense!

One thing, you might need to use className = "" instead or aswell, I can't quite remember.

 

- Eris

Thanks Eris. I think I understand... ha!

Use a css class one for button and one for disabledbutton, in the same script that disables/enables the button, change the style over with

 

if(need to disable){
 document.getElementById(idhere).class = "disabledbutton";
} else if (need to enable){
 document.getElementById(idhere).class = "button";

}

 

Hope the pseudo-code makes sense!

One thing, you might need to use className = "" instead or aswell, I can't quite remember.

 

- Eris

hi,

 

use this class

 

.disabledbutton{ color: #FFFFFF; font-family: arial, verdana, sans-serif; font-size: 12px; border: 1px solid #f0eed9;; background-color: #cccccc;}

 

<input type="button" disabled="disabled" class="disabledbutton"/>

 

 

Regards,

www.cssdog.com

hi,

 

use this class

 

.disabledbutton{ color: #FFFFFF; font-family: arial, verdana, sans-serif; font-size: 12px; border: 1px solid #f0eed9;; background-color: #cccccc;}

 

<input type="button" disabled="disabled" class="disabledbutton"/>

Regards,

www.cssdog.com

 

How will it turn it back to the enabled CSS after that? The only supported way to do this is with javascript as Eris mentioned.

 

Rob