# カート画面のチェックボックスを必須にする方法について

**URL:** <https://community.shopify.com/t/topic/160381>\
**Category:** 技術的なQ＆A\
**Created:** [October 17, 2022, 8:32am UTC](https://community.shopify.com/t/topic/160381 "2022-10-17T08:32:25Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

特定のSKUを含む商品がカートにある場合のみ、利用規約チェックボックスを必須にしたいが、required属性が効かず未チェックでも「ご購入手続きへ」に進めてしまう問題。SKUは在庫管理用の商品識別子、requiredはブラウザの入力必須検証を行うHTML属性。

- 推測される原因：購入ボタンが<form>の標準submitではなくJavaScriptで送信しているため、ブラウザの必須チェックが発火しない可能性。対策として、チェック未済時は「ご購入手続きへ」ボタンを非表示／無効化するJavaScript制御を提案（サンプルは未検証）。
- 代替案：inputにform属性を付与して正しいフォームへ関連付ければ、requiredによる必須動作が有効になる可能性。ただしform属性非対応のレガシーブラウザでは無効で、テーマ（Craft）の仕様影響もあり得る。
- コード上の不備：form属性がない、requiredの後ろに余分なダブルクォート（required"）。これを修正の上、動作検証が必要。

現時点で確定解はなく、提案はいずれも未検証。アクションはJSでボタン制御、マークアップ修正、ブラウザ対応とテーマ仕様の確認。

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [October 17, 2022, 8:32am UTC](https://community.shopify.com/t/topic/160381/1 "2022-10-17T08:32:25Z")

</div>

お世話になります。

現在構築中のサイトにて、特定のSKUを持つ商品をカートに入れているときだけ、カート画面でチェックボックスを設置したいと考えております。

使用テーマはCraftです。

下記のコードを埋め込んでチェックボックスの設置はできたのですが、必須（ required）が作動していないようでチェックしないままでも決済に進めてしまいます。

こちらの原因と解決策をご存知の方がいらっしゃいましたらご教示いただけないでしょうか。

{% for item in cart.items %}  
{% if forloop.first and item.variant.sku contains “SKU” %}  
レンタルの利用規約をご確認ください。  
  
\<input type=“checkbox” id=“optin” name=“利用規約” value=“同意する” required"\>利用規約に同意する  
{% endif %}

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [October 19, 2022, 11:36am UTC](https://community.shopify.com/t/topic/160381/2 "2022-10-19T11:36:34Z")

</div>

カートの「ご購入手続きへ」ボタンをクリックした際に、

必須inputに入力がなくても、

チェックアウトフローに入ってしまう、

ということで合っていますでしょうか？

上記で合っているようでしたら、

Craftのカートのコードを見てみますと、

「ご購入手続きへ」ボタンが、

タグのsubmitではなく、

おそらくJavaScriptでsubmitしているため、

要素のreuired属性は無視されてしまうものと思われます。

(確証はありませんが。)

おそらく、

最も簡単な実装方法は、下記をJavaScriptで実装する、ではないかと思います。

利用規約への同意チェックボックスにチェックが入っていない場合、

「ご購入手続きへ」ボタンを表示しない。

掲載いただているコードで表現しますと下記のようになるかと思います。

(動作検証はしておりません。)

```javascript

```

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [October 19, 2022, 1:55pm UTC](https://community.shopify.com/t/topic/160381/3 "2022-10-19T13:55:42Z")

</div>

おそらく以下で「入力必須にする」という動作に関しては実現できるかなと思います。

```markup

ただし上記サンプルはform属性が有効なブラウザでのみ動作するため、レガシーなブラウザでは対応できない可能性があります。

この辺りはCraftテーマ自体の対応範囲にも関連しますので、必要に応じて調査や対応を行うことをお勧めします。

サンプルが動作する場合、記載されていたコードの問題点は以下のとおりです。

- form属性がない
- requiredの後ろにダブルクォートがついている

以上ですが動作しない場合は不要な情報となり申し訳ありません。
```