チェックボックスにチェックされたときのみボタンが押せるようにしたい

Question

わからないこと

フォーム画面を作成しており、チェックボックスにチェックされたときだけボタンを押せるようにしたいです。
下のコードのようにチェックボックスと登録ボタンを設置しています。
調べても良い方法をみつけれなかったのでどなたか教えて頂けないでしょうか。
（できればstateは使いたくないです）

　　　　　　　（省略）
　　　　　　　<input
                    id="check"
                    type="checkbox"
                    name="check"
            /><label>同意する</label>
            <button
                 　 type="submit"
                    disabled={isSubmitting}
            >
                    登録
            </button>
            (省略)

Answer 1

<input id="check" type="checkbox" name="check" onclick="hoge()"/>
<label>同意する</label>
<button id="but" type="submit" disabled={isSubmitting}>登録</button>

function hoge() {
  if(document.getElementById('check').checked == true) {
    document.getElementById('but').disabled = false;
  } else {
    document.getElementById('but').disabled = true;
  }
}

こんな感じかな？
サンプル

Comments

[hello_whats_up]

回答ありがとうございます。
実際に動くところ確認できました。
ちなみになのですが、Reactを使用しているので、できればjqueryは使いたくないのですが、別の方法はありますでしょうか。

[kyoya0819]

あります
というより記述を変更するだけですが
編集するので少々お待ちください。

[hello_whats_up]

編集していただきありがとうございます！

Answer 2

（できればstateは使いたくないです）

なぜですか？stateを使うのが一番シンプルだと思います。

class YourClassName extends React.Component {
  constructor(props) {
    this.state = {
      isAgreed: false,
    }
  }

  onAgreementCheckboxChanged(newValue) {
    this.setState({ isAgreed: newValue })
  }

  render() {
    return (
      <label>
        <input
          id="check"
          type="checkbox"
          name="check"
          onClick={evt => {
            this.onAgreementCheckboxChanged(evt.currentTarget.checked)
          }}
        />
        同意する
      </label>
      <button
        type="submit"
        disabled={isSubmitting || !this.state.isAgreed}
      >登録</button>
    );
  }
}

Sep 27, 2019 12:03pm追記
ちなみに「なぜstateを使いたくないのか」聞いている意図ですが、
stateを使わないのが要件であったり、他Componentとの兼ね合いで管理が難しい（それはそれで設計に問題がある気がしますが）などの事情があるのであればstateを使わない手段を模索するのにも一理あると思います。もしそうではなくて、心理的にstateを使いたくないだけであれば、まったく合理的ではないので、ここをclearにしておかないと、現状のコードに対して、あるいは今後コードを生み出し続ける質問者にとって、何が必要なのか不明瞭なためです。

Comments

[thyda.eiqau]

おっと、マイナス評価ついていることに気付いていませんでした。どこかコード上不備があるでしょうか？

[hello_whats_up]

アドバイスありがとうございます。まだまだ知識不足のため、他のコンポーネントとの兼ね合いでstateを使いたくありませんでしたが、使えるように変更してうまくいきました。ありがとうございました。

あと、コードについてなのですが、constructorの中にsuper(props);を入れないといけないのでは..?
(ちなみにマイナスは私ではありません笑)

[thyda.eiqau]

ああ、そうですね、super(props)は必要です。Reactのプロジェクトからコピペできればよかったのですがあいにく回答した時点では手元に環境がなく、記憶で手打ちしたので漏れていました。失礼しました。

あとはbuttonのdisabledではなくformのactionイベントを拾う側でこのstateが「同意済みではない」ときにアラートを吐いてイベントリスナーから抜けるみたいなパターンでもいいと思いますが、action側のコードが不明だったのでこちらは回答からは省いています。参考になれば幸いです。

stateの管理が大変というのはたぶんstateで管理しているアイテムが多くてわけわからんみたいな状態だと思うのですが、適宜子Component化して、それぞれの子に必要なものをpropとして渡してあげるとコードがスリムになっていいと思います。分けすぎるとファイル数が膨大になって一長一短みたいな感じになりますが。

[hello_whats_up]

丁寧なアドバイスありがとうございます。
参考にさせていただきます。

Answer 3

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#check').addEventListener('change',e=>{
    document.querySelector('#submit').disabled=!e.target.checked;
  });
});
</script>
<label><input id="check" type="checkbox" name="check" />同意する</label>
<button type="submit" id="submit" disabled>登録</button>

姑息なのでおすすめしませんがjsを利用せずにダミーを利用する方法

<style>
#check:not(:checked) ~ [type=submit]{display:none}
#check:checked ~ [type=button]{display:none}
</style>
<input id="check" type="checkbox" name="check" /><label for="check">同意する</label>
<button type="submit" >登録</button>
<button type="button" disabled>登録</button>