/    Sign up×
Community /Pin to ProfileBookmark

Toggle Checboxes like radio and disabling checking

Copy linkTweet thisAlerts:
Nov 21.2004

Hi Champs

I need a solution for the following sample, all based on checkboxes:

1) Enable Menu (defualt: unchecked)

1a) menu item 1
1b) menu item 2
1c) menu item 3
…
2) make a button (defualt: unchecked)

Unless 1) gets checked 1a, 1b, 1c and 2) are not clickable
When 1) is checked 1a, 1b, 1c MAY be clicked but 2) not

When 2) is clicked 1), 1a,…,1c) can not be clicked

Any Idea?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ai3rulesNov 22.2004 — Hi, I couldn't follow exactly what it was you wanted. Number 2) mentions making a button unchecked? Not sure what that means but here is something that I am guessing is close to what you're looking for. Hope it helps.

<html>

<head>

<script language="javascript">

<!--

function enable(which){

var oneCH = document.form1.one.checked;

var twoCH = document.form1.two.checked;

var one = document.form1.one

var oneA = document.form1.onea

var oneB = document.form1.oneb

var oneC = document.form1.onec

var two = document.form1.two

if(which == "one"){

if(oneCH){

oneA.disabled = false

oneB.disabled = false

oneC.disabled = false

two.disabled = false

}

if(!oneCH){

oneA.disabled = true

oneB.disabled = true

oneC.disabled = true

two.disabled = true

}

}

if(which == "two"){

if(twoCH){

one.disabled = true

oneA.disabled = true

oneB.disabled = true

oneC.disabled = true

}

if(!twoCH){

one.disabled = false

oneA.disabled = false

oneB.disabled = false

oneC.disabled = false

}

}

}

//-->

</script>

</head>

<body>

<form name="form1">

<table>

<tr><td>1)</td><td><input type="checkbox" name="one" onclick="enable(this.id)" id="one"></td></tr>

<tr><td>1a)</td><td><input type="checkbox" name="onea" disabled></td></tr>

<tr><td>1b)</td><td><input type="checkbox" name="oneb" disabled></td></tr>

<tr><td>1c)</td><td><input type="checkbox" name="onec" disabled></td></tr>

<tr><td>2)</td><td><input type="checkbox" name="two" disabled onclick="enable(this.id)" id="two"></td></tr>

</table>

</form>

</body>

</html>
Copy linkTweet thisAlerts:
@frankkiauthorNov 22.2004 — Thats awesome - cool!!!!

It is exactly what I needed - only one thing needs to be done:

Whenn 2) gets checked, 1 1a... needs o be unchecked.

Would this be possible?

SO MANY MANY Thanks!!!
Copy linkTweet thisAlerts:
@ai3rulesNov 22.2004 — Glad to help. This should do it.

<html>

<head>

<script language="javascript">

<!--

function enable(which){

var oneCH = document.form1.one.checked;

var twoCH = document.form1.two.checked;

var one = document.form1.one

var oneA = document.form1.onea

var oneB = document.form1.oneb

var oneC = document.form1.onec

var two = document.form1.two

if(which == "one"){

if(oneCH){

oneA.disabled = false

oneB.disabled = false

oneC.disabled = false

two.disabled = false

}

if(!oneCH){

oneA.disabled = true

oneB.disabled = true

oneC.disabled = true

two.disabled = true

}

}

if(which == "two"){

if(twoCH){

one.disabled = true

oneA.disabled = true

oneB.disabled = true

oneC.disabled = true

//add this part to uncheck 1 through 1c when 2 is clicked

one.checked = false

oneA.checked = false

oneB.checked = false

oneC.checked = false

}

if(!twoCH){

one.disabled = false

oneA.disabled = false

oneB.disabled = false

oneC.disabled = false

}

}

}

//-->

</script>

</head>

<body>

<form name="form1">

<table>

<tr><td>1)</td><td><input type="checkbox" name="one" onclick="enable(this.id)" id="one"></td></tr>

<tr><td>1a)</td><td><input type="checkbox" name="onea" disabled></td></tr>

<tr><td>1b)</td><td><input type="checkbox" name="oneb" disabled></td></tr>

<tr><td>1c)</td><td><input type="checkbox" name="onec" disabled></td></tr>

<tr><td>2)</td><td><input type="checkbox" name="two" disabled onclick="enable(this.id)" id="two"></td></tr>

</table>

</form>

</body>

</html>
Copy linkTweet thisAlerts:
@frankkiauthorNov 22.2004 — Just Great!

So Many thanks for your time and help!
×

Success!

Help @frankki 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 5.3,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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