fix: выбор вариантов (label→div убирает двойной toggle), блокировка после submit

This commit is contained in:
Dauren777 2026-06-26 06:44:36 +00:00
parent 769387dbc3
commit 803cabbde7
2 changed files with 6 additions and 4 deletions

8
app.js
View File

@ -939,11 +939,11 @@ function renderMulti(kind){
<div class="opt-list" id="optList"> <div class="opt-list" id="optList">
${items.map((it,i)=>{ ${items.map((it,i)=>{
const checked=ans.has(i)?"checked":""; const checked=ans.has(i)?"checked":"";
return `<label class="opt" data-i="${i}"> return `<div class="opt ${submitted?'disabled':''}" data-i="${i}">
<input type="checkbox" ${checked} ${submitted?"disabled":""}> <input type="checkbox" ${checked} ${submitted?"disabled":""}>
<span class="opt-box"></span> <span class="opt-box"></span>
<span class="opt-text">${it.t}</span> <span class="opt-text">${it.t}</span>
</label>`; </div>`;
}).join("")} }).join("")}
</div> </div>
<div class="step-foot"> <div class="step-foot">
@ -1006,11 +1006,11 @@ function renderDiagnosis(){
<div class="opt-list" id="optList"> <div class="opt-list" id="optList">
${c.diagnosis.options.map((o,i)=>{ ${c.diagnosis.options.map((o,i)=>{
const checked=state.answers.diagnosis===i?"checked":""; const checked=state.answers.diagnosis===i?"checked":"";
return `<label class="opt is-radio" data-i="${i}"> return `<div class="opt is-radio ${submitted?'disabled':''}" data-i="${i}">
<input type="radio" name="dx" ${checked} ${submitted?"disabled":""}> <input type="radio" name="dx" ${checked} ${submitted?"disabled":""}>
<span class="opt-box"></span> <span class="opt-box"></span>
<span class="opt-text">${o.t}</span> <span class="opt-text">${o.t}</span>
</label>`; </div>`;
}).join("")} }).join("")}
</div> </div>
<div class="step-foot"> <div class="step-foot">

View File

@ -310,6 +310,8 @@ h1,h2,h3{letter-spacing:-.4px}
.opt-list{display:grid;gap:10px;margin-bottom:20px} .opt-list{display:grid;gap:10px;margin-bottom:20px}
.opt{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.15s;user-select:none} .opt{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.15s;user-select:none}
.opt:hover{border-color:var(--gray-300)} .opt:hover{border-color:var(--gray-300)}
.opt.disabled{cursor:default}
.opt.disabled:hover{border-color:var(--line)}
.opt input{display:none} .opt input{display:none}
.opt-box{width:23px;height:23px;border-radius:7px;border:2px solid var(--gray-300);flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;transition:.15s;margin-top:1px} .opt-box{width:23px;height:23px;border-radius:7px;border:2px solid var(--gray-300);flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;transition:.15s;margin-top:1px}
.opt input:checked + .opt-box{background:var(--gold);border-color:var(--gold)} .opt input:checked + .opt-box{background:var(--gold);border-color:var(--gold)}