パスワード一致でdisabled要素を活性化するjsコード

Question

前提・実現したいこと

なんっちゃってパスワード設定を考えています。

非表示で設定しているvalue内容と、入力されるパスワードが一致したら、
あらかじめdisabled指定しているbuttonを活性化できないかなと
試しているのですがうまくいきません。

上記を実現するためのJavaScriptをご教授いただけないでしょうか？

よろしくお願いします。

該当のソースコード

<form ononclick="CheckPassword()">
<div><input type="hidden" id="hidden_password" value="12345"></div>
<div><input type="password" id="password"><span class="password">　パスワード</span></div>
<p><input disabled type="button" id="button" value="送信する"></p>
</form>

<script language="JavaScript" type="text/javascript">

  function CheckPassword() {
    var hidden_password = document.getElementById("hidden_password").value; //フォームの値を取得
    var password = document.getElementById("password").value; //確認用フォームの値を取得
    // パスワードの一致確認
    if (hidden_password != password){
　　　◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
　　　◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
　　　◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
  };

</script>

分からなくて困っている部分

上記の◯◯◯◯◯◯◯◯◯◯◯の部分
あらかじめdisabled指定しているbuttonを活性化させるコードを
色々と検索して試してみているのですが
うまくいきません。

よろしくお願いします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[Lhankor_Mhy]

『うまくいきません』とは具体的には何が起きていますか？
「こうなると思って」「このようなコードを書いたら」「このような結果になった」のように、期待した結果とコードと実際の結果をご提示ください。

[azuapricot]

hidden に持たせて隠しているつもりかもしれませんが
hiddenってF12押してデベロッパーツール開けば誰でものぞけちゃいますよ。
そんながばがばでも良いのなら止めはしませんが。

Answer 1

質問への追記・修正の依頼にも書かれていますが、この方式ではまったく機密は守れていないこと、留意してください。

あくまでも一見すると、パスワードで保護されているかのように見せかけるだけでいいのであれば、以下のヒントを元に考えてみてください。

---

以下のようにすることで、パスワードを入力中に即時 CheckPassword() が呼び出され、判定させることができます。

<input type="password" id="password" oninput="CheckPassword()">

以下のようにボタンの disabled プロパティを変更することでボタンの有効・無効を変更できます。

const button = document.getElementById("button");
button.disabled = false;

以上の点が理解できればあとは自分で実装できるかと思います。

Comments

[h.fujita]

ありがとうございます。
試させていただきます。

Answer 2

Boolean: Returns / Sets the element's disabled attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form.

HTMLInputElement - Web API | MDN

ということですので、element.disabled = false;みたいな感じで書けばいいかと思います。
そのHTMLだとボタン要素が参照しにくいので、id属性あたりを振った方がいいかもしれませんね。

Comments

[h.fujita]

ありがとうございます。
参考にさせていただきます。