Блог

Главная - Вопросы по программированию - Как отключить флажок условно?

Как отключить флажок условно?

#javascript #reactjs

Вопрос:

У меня есть форма с флажками. Мне нужно отключить флажок, когда установлено максимальное количество флажков. Это то, что я пробовал до сих пор:

 const maxOptions = 2;
const optionChecked = []
const checkedCount = optionChecked.length;

function handleChecked(e) {
    let index;
    if (e.target.checked) {
        optionChecked.push(
            e.target.value
        )
    } else {
        index = optionChecked.indexOf( e.target.value)
        optionChecked.splice(index, 1)
    }

    console.log(optionChecked.length)
}

//my checkbox
{Opcoes.map((a) => (
    <section className='product-options'>
        <a>
            <text> {a.Nome} </text>
            <input type='checkbox' 
              value = {a.ID}
              onChange = {(e) => handleChecked(e) }
              disabled = {!optionChecked[a.ID] amp;amp; checkedCount === maxOptions ? true: false}             
            ></input>
        </a>
    </section>
))}

Ответ №1:

 const maxOptions = 2;
const [checkedCount, setCheckedCount] =useState(0) 

function handleChecked(e) {
    
       e.target.checked?setCheckedCount(prevCount=>prevCount 1):setCheckedCount(prevCount=>prevCount-1)
     } 

    console.log(checkedCount)


//my checkbox
{Opcoes.map((a) => (
    <section className='product-options'>
        <a>
            <text> {a.Nome} </text>
            <input type='checkbox' 
              value = {a.ID}
              onChange = {(e) => handleChecked(e) }
              disabled = { checkedCount ===maxOptions}             
            ></input>
        </a>
    </section>
))}

Комментарии:

1. Спасибо, но этот код отключит все флажки, я хочу отключить только тот флажок, который не установлен, потому что, если пользователю нужно изменить параметры, установленные флажки нельзя отключить

2. @MatheusMartins мой новый ответ должен решить ваши требования прямо сейчас.

Ответ №2:

Если вы хотите включить отмеченные элементы, вы можете сделать что-то вроде этого:

 import { useState, useRef, createRef } from "react";

    function App() {
      const maxOptions = 1;
      const [checkedCount, setCheckedCount] = useState(0);
    
      function handleChecked(e) {
        e.target.checked
          ? setCheckedCount((prevCount) => prevCount   1)
          : setCheckedCount((prevCount) => prevCount - 1);
      }
    
      const Opcoes = [
        { Nome: "pepita", ID: "1" },
        { Nome: "pepito", ID: "2" },
      ];
    
      let items = useRef(Opcoes.map(() => createRef()));
    
      return (
        <>
          <div>
            {Opcoes.map((a, ind) => (
              <section className="product-options" key={ind}>
                <a>
                  <text> {a.Nome} </text>
                  <input
                    type="checkbox"
                    value={a.ID}
                    onChange={(e) => handleChecked(e)}
                    ref={items.current[ind]}
                    disabled={
                      checkedCount === maxOptions amp;amp;
                      !items?.current[ind]?.current.checked
                    }
                  ></input>
                </a>
              </section>
            ))}
          </div>
        </>
      );
    }
    
    export default App;
Метки: