同意トグルで有効化される送信ボタン

<div class="d04-11-12-wrap">
          <button type="button" class="d04-11-12-switch" role="switch" aria-checked="false" aria-label="利用規約に同意する">
            <span class="d04-11-12-knob"></span>
          </button>
          <span class="d04-11-12-switch-label">利用規約に同意する</span>
          <button type="button" class="d04-11-12-submit" disabled>同意すると送信できます</button>
        </div>

.d04-11-12-wrap{width:min(260px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
        .d04-11-12-switch{position:relative;width:44px;height:26px;border-radius:999px;background:#d5d9e0;border:none;cursor:pointer;padding:0;flex:none;transition:background .25s ease}
        .d04-11-12-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .25s ease}
        .d04-11-12-switch[aria-checked="true"]{background:#4a6cf7}
        .d04-11-12-switch[aria-checked="true"] .d04-11-12-knob{left:21px}
        .d04-11-12-switch-label{font-size:12.5px;color:#555;font-weight:600;margin-top:-8px}
        .d04-11-12-submit{width:100%;padding:12px;font-size:13.5px;font-weight:700;color:#8a93a3;background:#eef0f3;border:none;border-radius:8px;cursor:not-allowed;transition:background .25s,color .25s}
        .d04-11-12-submit:not(:disabled){background:linear-gradient(135deg,#4a6cf7,#6366f1);color:#fff;cursor:pointer}

(function(){
        var root=document.querySelector('.d04-11-12-wrap');
        if(!root)return;
        var sw=root.querySelector('.d04-11-12-switch');
        var submit=root.querySelector('.d04-11-12-submit');
        sw.addEventListener('click',function(){
          var checked=sw.getAttribute('aria-checked')==='true';
          sw.setAttribute('aria-checked',String(!checked));
          submit.disabled=checked;
          submit.textContent=checked?'同意すると送信できます':'送信する';
        });
      })();