Button disabled unless the checkbox is clicked, how do you also disable hover?

Is it possible to add conditionals to css elements in vanilla, or is that something sass/scss picks up? I'd like button:hover to also be disabled unless yes = true, that's it lol.
<script>
let yes = false;
</script>

<div class="form">
<label><input type="checkbox" bind:checked={yes} />Sign me up to the spam!</label>

{#if yes}
<p>Thanks, we'll sign you up to our spammy newsletter!</p>
{:else}
<p><strong>You need to opt in to continue.</strong></p>
{/if}

<button disabled={!yes}>Subscribe</button>
</div>

<style>
.form {
display: flex;
flex-direction: column;
align-items: center;
background-color: grey;
}

button {
width: 20%;
border-radius: 5px;
/* box-shadow: 2px 2px; */
}

button:hover {
box-shadow: 2px 2px;
font-weight: bold;
color: black;
}
</style>
<script>
let yes = false;
</script>

<div class="form">
<label><input type="checkbox" bind:checked={yes} />Sign me up to the spam!</label>

{#if yes}
<p>Thanks, we'll sign you up to our spammy newsletter!</p>
{:else}
<p><strong>You need to opt in to continue.</strong></p>
{/if}

<button disabled={!yes}>Subscribe</button>
</div>

<style>
.form {
display: flex;
flex-direction: column;
align-items: center;
background-color: grey;
}

button {
width: 20%;
border-radius: 5px;
/* box-shadow: 2px 2px; */
}

button:hover {
box-shadow: 2px 2px;
font-weight: bold;
color: black;
}
</style>
51 Replies
Zoë
Zoë12mo ago
You can use button:not([disabled]) to select buttons that aren't disabled, so you can attach hover events to that
b1mind
b1mind12mo ago
I like that solution personally but ya you could also have the class:yes and then define it in the css .yes I'd probably go with Z's solution though.
CDL
CDL12mo ago
Oh that's neat. Is that an scss only thing or can I use that in vanilla css
b1mind
b1mind12mo ago
that is css :not() is i mean if that is what you mean not me, thats svelte >.>;;
CDL
CDL12mo ago
ah perfect that works exactly how I wanted it to
button:not([disabled]):hover {
button:not([disabled]):hover {
b1mind
b1mind12mo ago
sideNote if you want to have disabled attrib fade away if false you can do this
<button
disabled={yes ? undefined : true}
>
Subscribe
</button>
</div>
<button
disabled={yes ? undefined : true}
>
Subscribe
</button>
</div>
CDL
CDL12mo ago
hey b1 is it possible to hide a component until I hit a checkbox and click the button?
b1mind
b1mind12mo ago
the whole !yes logic was confusing to me so you might have to switch it lol naming things is hard but a yes var for a boolean? >.>;;
Zoë
Zoë12mo ago
input[type="checkbox"]:not(:checked) ~ button { display: none; } Purely CSS assuming button is a sibling to the checkbox. Using this you can allow the button to be a child of a sibling, and you can also use :has() if you want the checkbox as a child, you want what are the base siblings for one to check if it has a checked checkbox, then select the sibling and find the button Scripting would be a better option however
b1mind
b1mind12mo ago
you can just put them in a if/else block
{#if yes}
<Component>
{/if}
{#if yes}
<Component>
{/if}
CDL
CDL12mo ago
ah yes.. my bad, I was overthinking it lol
b1mind
b1mind12mo ago
hah happens I mean there is 10 ways from sundays to do most things, like Z over here with solid CSS solutions 😄 Important part is don't mix up too many patterns in the same project, that is how its easy to get lost ever looking back or talking about it. Def try out different ways though, like I mean you could do conditional slots too (though looks like slots might be going away in Svelte5 :o), since Kit you could use load() and only render the component based on a query param. Like endless xD
CDL
CDL12mo ago
yeah, trying to find a style I like and stick with that, rather than mixing and matching Not really sure how I go about this component part though, but that may have to be new post
Zoë
Zoë12mo ago
Scripting is usually the way you want to handle interactivity because you can add accessibility
CDL
CDL12mo ago
basically {if} componentOne is checkbox=yes and button clicked -> reveal componentTwo
Zoë
Zoë12mo ago
Which is sad because I love to replace JavaScript with CSS even for complex things but it's only ever for fun
CDL
CDL12mo ago
by scripting you mean handle it in js?
Zoë
Zoë12mo ago
Yes
CDL
CDL12mo ago
So this question I think stays relevant to the topic. I think I have to import the 2nd component to my 1st component for this to work, as I tried it in the +layout.svelte and it wasn't working. I'm trying to find a way to show the 2nd component once I click the START button in the 1st component. I tired the below but it doesn't make sense.. Would it be an onclick?
<div class="form">
<h2>I want to play a game...</h2>
<label>Are you ready?<input type="checkbox" bind:checked={yes} /></label>

{#if yes}
<p>Good choice.</p>
{:else}
<p>There are 3 games, beat each one to progress.</p>
{/if}

<button disabled={!yes}>START</button>

{#if button disabled={!yes} && checked={yes}}
<ProjTwo />
{:else}
<p>Nothing to see here..</p>
{/if}
<div class="form">
<h2>I want to play a game...</h2>
<label>Are you ready?<input type="checkbox" bind:checked={yes} /></label>

{#if yes}
<p>Good choice.</p>
{:else}
<p>There are 3 games, beat each one to progress.</p>
{/if}

<button disabled={!yes}>START</button>

{#if button disabled={!yes} && checked={yes}}
<ProjTwo />
{:else}
<p>Nothing to see here..</p>
{/if}
b1mind
b1mind12mo ago
I guess why components first off 😄
CDL
CDL12mo ago
uhh so basically I'm doing this
CDL
CDL12mo ago
No description
b1mind
b1mind12mo ago
Like I make a component to separate concerns or reusability typically right?
CDL
CDL12mo ago
just messing around lol
b1mind
b1mind12mo ago
right but understand why you are doing what you are doing
CDL
CDL12mo ago
Well it's effectively 4 separate apps, is how I've viewed it
b1mind
b1mind12mo ago
{#if button disabled={!yes} && checked={yes}} this is invalid btw well looks it xD you would just want {#if yes} but again naming has me a bit confused but 😄
CDL
CDL12mo ago
yeah it's failed I just left it in there to show you how shit I am lmao
b1mind
b1mind12mo ago
lol na all good
CDL
CDL12mo ago
but to also give you an idea of wtf I'm trying to do click button -> reveal 2nd block
b1mind
b1mind12mo ago
so check enables button start enables next box
CDL
CDL12mo ago
yeah checkbox = {yes} -> button activates -> click button -> next box appears
CDL
CDL12mo ago
interesting, can I not import a component into another?
<div class="form">
<h2>I want to play a game...</h2>
<label>Are you ready?<input type="checkbox" bind:checked={yes} /></label>

{#if yes}
<p>Good choice.</p>
{:else}
<p>There are 3 games, beat each one to progress.</p>
{/if}

<button disabled={!yes} type="button" on:click={() => (start = true)}>Start</button>

{#if start && yes}
<ProjtTwo />
{/if}
</div>
<div class="form">
<h2>I want to play a game...</h2>
<label>Are you ready?<input type="checkbox" bind:checked={yes} /></label>

{#if yes}
<p>Good choice.</p>
{:else}
<p>There are 3 games, beat each one to progress.</p>
{/if}

<button disabled={!yes} type="button" on:click={() => (start = true)}>Start</button>

{#if start && yes}
<ProjtTwo />
{/if}
</div>
oh wait, typo lmao nvm, still doesn't work ah shit nevermind, it works, but it brings the 2nd app into the 1st app.. Ah man, I'm trying to do too much shit at once lol
b1mind
b1mind12mo ago
Yea idk you are playing and breaking things that is what counts a lot of the time.
CDL
CDL12mo ago
yeah I mean this is just to see what I can do etc but I'd be curious how I solve that
b1mind
b1mind12mo ago
Also I'm not quite sure why you are doing what you are doing. Seems like lots of React brain shit no offence to you
CDL
CDL12mo ago
probably, I'm just dicking around I'm not really sure how to do this in svelte
b1mind
b1mind12mo ago
haha yea I revert to my previous comment fuk around and find out is key... keep doing what you doing
CDL
CDL12mo ago
I want to hit the button on the 1st block, unlock the 2nd block, hit button 2nd block, unlock 3rd block etc..
CDL
CDL12mo ago
I just need to now figure out how I hit button on block 1 and have block 2 appear in block 2 😄 ah screw it, let's go build soemthing actually useful 😂
b1mind
b1mind12mo ago
Personally since you are using Svelte/Kit I would take advantage and learn how to make a real website 😄 Like each project as /path/ or learn query params and real forms 😄 I was going to comment you are using a "form" now and would be great if you tried using it fo real no e.prevent default and what not. but yea that is my brain not trying to send you down the rabbit hole lol
<div class="form">
CDL
CDL12mo ago
yeah I get it, I was just about to rebuild my portfolio in svelte, i dunno, im at a loss of project ideas, too many to choose, brain overload
b1mind
b1mind12mo ago
that is why finding one you want is key something you could see yourself using or just a topic that you are passionate on its not easy ngl but still best
CDL
CDL12mo ago
ugh no idea, gaming and sport is all I find interesting, then just wanting to build functional apps
b1mind
b1mind12mo ago
So you wanna build more Apps than Website I take it. you do use the term very deliberate it seems 😄 I mean you see the pointless crap I make 🤣
CDL
CDL12mo ago
I just want to learn hahaha honestly mate I have no idea what I should be doing, I'm winging it, I have no mentor (I do but he's on vacation) I say app, but I call anything in vscode an app what do you consider a website, and an app? out of curiosity, then we can close this coz I've derailed it again lmao maybe that's where I'm going wrong, I'm trying to build apps, rather than just building websites with content on them
b1mind
b1mind12mo ago
I mean its a fine line ig any more these days. One I kinda have issues with honestly. People think their websites need to be "apps" lol or what not. Don't mistake me I love PWA's so yea. But to me a App is the litteral term Application/Software. Figma is an App Github is a Website with Apps xD idk if that is the best one ... its Sunday I'm toasted.
CDL
CDL12mo ago
fair I should focus on building websites, with concepts in them, instead of just throwing up a blank page and trying to build a form in it or whatever I'm gonna make an MPA gallery site and get the hang of routing, simple project thanks b1!
Want results from more Discord servers?
Add your server