Kevin Powell - Community•13mo ago

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ë•13mo ago

You can use button:not([disabled]) to select buttons that aren't disabled, so you can attach hover events to that

b1mind•13mo 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.

CDLOP•13mo ago

Oh that's neat. Is that an scss only thing or can I use that in vanilla css

b1mind•13mo ago

that is css :not() is i mean if that is what you mean not me, thats svelte >.>;;

CDLOP•13mo ago

ah perfect that works exactly how I wanted it to

    button:not([disabled]):hover {

    button:not([disabled]):hover {

b1mind•13mo 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>

CDLOP•13mo ago

hey b1 is it possible to hide a component until I hit a checkbox and click the button?

b1mind•13mo 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ë•13mo 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•13mo ago

you can just put them in a if/else block

{#if yes}
  <Component>
{/if}

{#if yes}
  <Component>
{/if}

CDLOP•13mo ago

ah yes.. my bad, I was overthinking it lol

b1mind•13mo 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

CDLOP•13mo 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ë•13mo ago

Scripting is usually the way you want to handle interactivity because you can add accessibility

CDLOP•13mo ago

basically {if} componentOne is checkbox=yes and button clicked -> reveal componentTwo

Zoë•13mo ago

Which is sad because I love to replace JavaScript with CSS even for complex things but it's only ever for fun

CDLOP•13mo ago

by scripting you mean handle it in js?

Zoë•13mo ago

Yes

CDLOP•13mo 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•13mo ago

I guess why components first off 😄

CDLOP•13mo ago

uhh so basically I'm doing this

CDLOP•13mo ago

b1mind•13mo ago

Like I make a component to separate concerns or reusability typically right?

CDLOP•13mo ago

just messing around lol

b1mind•13mo ago

right but understand why you are doing what you are doing

CDLOP•13mo ago

Well it's effectively 4 separate apps, is how I've viewed it

b1mind•13mo 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 😄

CDLOP•13mo ago

yeah it's failed I just left it in there to show you how shit I am lmao

b1mind•13mo ago

lol na all good

CDLOP•13mo ago

but to also give you an idea of wtf I'm trying to do click button -> reveal 2nd block

b1mind•13mo ago

so check enables button start enables next box

CDLOP•13mo ago

yeah checkbox = {yes} -> button activates -> click button -> next box appears

b1mind•13mo ago

https://svelte.dev/repl/4523c937c9e041f590cbbeacdf7bf76b?version=4.2.3

CDLOP•13mo 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•13mo ago

Yea idk you are playing and breaking things that is what counts a lot of the time.

CDLOP•13mo ago

yeah I mean this is just to see what I can do etc but I'd be curious how I solve that

b1mind•13mo 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

CDLOP•13mo ago

probably, I'm just dicking around I'm not really sure how to do this in svelte

b1mind•13mo ago

haha yea I revert to my previous comment fuk around and find out is key... keep doing what you doing

CDLOP•13mo ago

I want to hit the button on the 1st block, unlock the 2nd block, hit button 2nd block, unlock 3rd block etc..

b1mind•13mo ago

https://tenor.com/view/carry-on-mark-philips-rdcworld1-don%27t-stop-go-on-gif-13930602188014386807

Tenor

CDLOP•13mo 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•13mo 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">

b1mind•13mo ago

https://tenor.com/view/triggered-triggering-intensifies-rage-gif-15297552

Tenor

CDLOP•13mo 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•13mo 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

CDLOP•13mo ago

ugh no idea, gaming and sport is all I find interesting, then just wanting to build functional apps

b1mind•13mo 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 🤣

CDLOP•13mo 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•13mo 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.

CDLOP•13mo 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!

Gaming

Programming

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