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

我需要实现以下功能:

1. 有两个类别-“动作”和“代理”,每个类别都有两个值,它们是用“单选按钮”对象实现的
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>

提前感谢