Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2018/04/23こんにちは(・∀・)今回はラジオボタンやチェックボックスがチェックされたら有効になるリンクボタンのサンプルをご紹介します。→」になり、テキストリンクに変わります。すべてのサンプルで使用します。snippetを<head>内に読み込みます。{$("#link1").html("Next");};});});Resultデモ1デモ2デモ3Nextラジオボタンにチェックを入れないと「Next」のテキストリンクが有効になりません。次へ進むことができないのでチェックもれを防ぐことができます。→」になり、テキストリンクに変わります。→</a>");}});});Resultデモ1デモ2デモ3Nextチェックボックスにチェックを入れないと「Next」のテキストリンクが有効になりません。次へ進むことができないのでチェックもれを防ぐことができます。単一チェックボックス用のサンプルこちらもチェックボックスのサンプルですが、2番のサンプルと違い、チェックボックスは一つなのでjQueryはもっとシンプルになります。ある「~に同意したら次へ進む」的なページで使えると思います。こちらも同じくチェックボックスをチェックすると「送信」の文字がテキストリンクに変わります。for="demo3">利用規約に同意します。{$("#link3").html("送信");}});});Result利用規約に同意します。送信こちらは単一のチェックボックス用のサンプルです。チェックボックスにチェックを入れないと「送信」のテキストリンクが有効になりません。次へ進むことができないので利用規約等、チェックを入れないと次に進めないようなページで使えると思います。単一チェックボックス用のサンプル(input要素)こちらもチェックボックスのサンプルですが、3番のサンプルと違うのは、ボタンがinput要素になりJavaScriptもpropを使います。こちらも同じくチェックボックスをチェックするとinput要素の「送信」ボタンが有効になります。for="demo4">利用規約に同意します。false);}});});Resultサンプルデモはこちらこちらも単一のチェックボックス用のサンプルです。チェックボックスにチェックを入れないとinput要素の「送信」ボタンが有効になりません。次へ進むことができないのでこちらも利用規約等、チェックを入れないと次に進めないようなページで使えると思います。いかがでしたか、導入はとても簡単ですね。よろしければお試しください。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。