/    Sign up×
Community /Pin to ProfileBookmark

Enable button after checking 3 checkboxes

Copy linkTweet thisAlerts:
Apr 20.2012

Hello,

I´ve a list with 10 checkboxes and I as wondering if there are any way of enable a submit button only when 3 of them are checked.

I’ve this code but it enables de button if any checkbox is checked.

[code=html]<script type=”text/javascript”>
function enviar(){
document.form.aceptar.disabled = true;
for (i=0;i<document.form.elements.length;i++){
if(document.form.elements[i].type == “checkbox”){
if(document.equipo.elements[i].checked == 1 ){
document.form.aceptar.disabled = false;

}
}
}
}
</script>[/code]

Any clue would be great!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WolfShadeApr 20.2012 — Inside the function, set another variable called "totalChecked" and set it to equal 0. Instead of using "document.form.aceptar.disabled = false;", use "totalChecked = totalChecked + 1;". After the loop, check if totalChecked equals 3. If it does, then use the "document.form.aceptar.disabled = false;" command.
Copy linkTweet thisAlerts:
@samuemxauthorApr 20.2012 — Wolf,

Thank you very much for your help. I think I did it, at least it works the way I want. This is the code:

[code=html]<script type="text/javascript">
function enviar(){

document.equipo.aceptar.disabled = true;

var totalchecked=0;

for (i=0;i<document.equipo.elements.length;i++){

if(document.equipo.elements[i].type == "checkbox"){
if(document.equipo.elements[i].checked == 1 ){
totalchecked = totalchecked+1;

}
}
}

if (totalchecked == 3) {
document.equipo.aceptar.disabled = false;
}

}
</script>[/code]

What do you think?

Another question... How Can i do to change the style of the button dinamically? If it's disables call class="disabled" and if it's enabled class="enabled".

Thank you!
Copy linkTweet thisAlerts:
@007JulienApr 20.2012 — See this page about Input Button disabled property
Copy linkTweet thisAlerts:
@WolfShadeApr 20.2012 — Buttons in most browsers will become gray, if disabled. If you want something different than the standard, create a class for each state, then change the class name as well as the disabled status.
Copy linkTweet thisAlerts:
@samuemxauthorApr 21.2012 — I solved everything! Thank you all for the clues ?

[code=html]<script type="text/javascript">
function enviar(){

document.equipo.aceptar.disabled = true;

var totalchecked=0;

for (i=0;i<document.equipo.elements.length;i++){

if(document.equipo.elements[i].type == "checkbox"){
if(document.equipo.elements[i].checked == 1 ){
totalchecked = totalchecked+1;

}
}
}

if (totalchecked > 4) {
document.equipo.aceptar.disabled = false;
document.equipo.aceptar.setAttribute("class", "aceptar");
} else {
document.equipo.aceptar.setAttribute("class", "disabled");
}

}
</script>[/code]
×

Success!

Help @samuemx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...