概要

jQueryを勉強して、これを作ります。

See the Pen
MLzEZE by sgigagaeru (@sgigagaeru)
on CodePen.

$()は$document.ready()の略

参考になりそうなjQueryのサンプルを探して見ると$(function(){で始まっていて「functionの前の$(ってナニ？」となりました。それで参考書「Web制作の現場で使うjQueryデザイン入門」を買って読みました。
$(は$document.ready(の略で、文書が読み込まれたら括弧内の処理を実行するの意でした。
文書の末尾にscriptを書くと、全ての文書が読み込まれた後で実行されます。その場合は$(function(){は不要です。

要素を指定して、それに対して何かする

jQueryを使うときは「HTML文書内の要素を指定して、それに対して何かをする」と考えれば良さそうでした。


$("button").text("←選べない");

これはbutton要素を指定して（このHTML中には一つしかbutton要素がないので特定できます）、そのtextを「←選べない」に変える。

$("#instruction").text("「壱」「弐」「参」が選べない状態です。");

これはid=instructionを持った要素のtextを『「壱」「弐」「参」が選べない状態です。』に変える。

$("select").prop("disabled", true);

これは、select要素のプロパティdisabledをtrueにする。

ボタンが押されたら何かする

$("button").click(function(){
  [ボタンが押されたときの処理]
});

これでボタンが押されたときの処理が書けます。
button要素を指定して、そこでclickイベントが起きたときの処理を書いています。

大体できた

$("button").click(function(){
  $("button").text("←選べない");
  $("#instruction").text("「壱」「弐」「参」が選べない状態です。");
  $("select").prop("disabled", true);
  return false;
});

ここまでをまとめて、ボタンを押されたときの処理は上のようにしました。大体できてきましたね。

See the Pen
yZQpyZ by sgigagaeru (@sgigagaeru)
on CodePen.

少しはまったところ

$("select").prop("disabled", true);のところですが、HTML表記では<select disabled>になります。
なのでattrを用いて$("select").attr("disabled", "")のような書き方をしてたんですが、それでは動きませんでした。propを使うのが正解です。

あと最後にreturn false;をいれていますが、これがないとページ遷移が発生します。今回のケースでは、同じページに遷移すなわちリロードが発生して、書き換えたテキストや属性が初期値に戻ります。

今回の完成形

いまは一度ボタンを押したらそれっきりになってしまうので、トグルするように、変数を入れて状態を切り替えるようにして完成です。