单击单选按钮后保存按钮不会立即更新

Question

我需要实现以下功能：

1. 有两个类别 - “action”和“agent”，每个类别都有两个值，通过“单选按钮”对象实现
2. 在流程开始时，单选按钮未被选中
3. 有一个“保存”按钮，在用户选择“代理”和“操作”之前应禁用该按钮。
4. 当他选择“代理”和“操作”时 - 保存按钮应该启用。

问题

我的问题是，如果我检查单选按钮两次，“保存”按钮就会被启用，例如，如果我选择“操作”，那么我需要按“代理”两次才能启用“保存”按钮.

我错过了什么？

代码示例

我有以下代码：

脚本部分：

<script lang="ts">
    $: agent = ['hand', 'tool']
    $: action = ['take', 'release']

    
    function onClickRB(){
        console.log('Tring to enable the button')
        console.log('agent: ' + agent)
        console.log('action: ' + action)

        if ((typeof agent) == "string" && (typeof action) == "string"){

            (document.getElementById("saveButton") as HTMLInputElement | null)!.disabled = false;
            
        }
    }
    function onSave(){
        
    }
</script>

主要部分：

<main>

        <!-- svelte-ignore a11y-label-has-associated-control -->
        <div class="label-select">
            <label class='agent'>Agent
                <div>
                    
                    <input 
                        id='hand' 
                        type='radio'
                        name='Hand' 
                        value='Hand'
                        bind:group={agent} 
                        on:click={() => onClickRB()}
                    /><label>Hand</label>
                    
                    <input 
                        id='tool' 
                        type='radio'
                        name='Tool' 
                        value='Tool'
                        bind:group={agent} 
                        on:click={() => onClickRB()}
                    /><label>Tool</label>
                </div>
            </label>

            <label class='action'>Action
                <div>
                    
                    <input 
                        id='contact' 
                        type='radio'
                        name='Contact' 
                        value='Contact'
                        bind:group={action} 
                        on:click={() => onClickRB()}
                    /><label>Contact</label>
                    <input 
                        id='release' 
                        type='radio'
                        name='Release' 
                        value='Release'
                        bind:group={action} 
                        on:click={() => onClickRB()}
                    /><label>Release</label>
                </div>
            </label>
        </div>
        <button id="saveButton" disabled on:click|preventDefault={()=>onSave()}>Save</button>
</main>

款式部分：

<style>
    main {
        text-align: center;
        padding: 0em;
        max-width: 240px;
        margin: 0 auto;
    }
    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
    .label-select{
        display: flex;
        justify-content: center;
    } 
    .agent{
        font-size: larger;
        border: 2px solid gray;
    } 
    .action{
        font-size: larger;
        border: 2px solid gray;
    } 
</style>

提前致谢

Answer 1

这是错误的做法。您已经通过

bind:group

绑定了来自输入的值，您只需定义禁用条件并将其传递给模板中的按钮即可。

<script lang="ts">
  let agent: string | undefined = undefined;
  let action: string | undefined = undefined;
  $: disabled = agent == null || action == null;
  // ...
</script>

<button id="saveButton" {disabled} >...

另请注意，禁用按钮在可访问性方面并不是最好的。 建议使用本机 HTML 验证，并且根本不禁用按钮，即只需在所有输入上设置

required

并将所有内容放入

form

中。如果客户端需要额外的逻辑，请处理表单的

submit

事件并使用

event.preventDefault()

。