JSイベントハンドラについて

チェックボックス切替によるフォーム制御を、JavaScriptのonclickイベントハンドラで実現したいです。

（実現したいフォーム状態）
・true　：Required（入力可能）、value=''
・false ：readOnly、value='*****'

試したことは①文の羅列②if文での条件分岐です。
HTML、PHP、JSで制御しています。JSで画面上での動きをつけることが目標です。
①はフォームのデフォルトが1回true⇔falseが切り替わるだけで、その後の切り替えはできません。②ではうまく効いておらず変化なしです。
コードは下記のとおりです。フォーム制御に関係する箇所を抜粋しましたが、不足ありましたらすいません。$OUTはPHPのデータ出力です。
今回passwordオブジェクト、hiddenオブジェクトは使用しない方向で考えています。よろしくお願いいたします。

<PHP> if (!$OUT['passcheck']) { $IA['pawword'] = 'true'; } <HTML> <p>パスワード</p>> <input type="text" id="password" model="Text" name="password" value="<?=$OUT['password']?>" required="true" inactive="<?=$IA['password']?>" invalid="<?=$IV['password']?>" > <P>パスチェック</p> <input type="checkbox" id="passcheck" model="Check" name="passcheck" value="1" invalid="<?=$IV['passcheck']?>" inactive="<?=$IA['passcheck']?>" <?=$OUT['passcheck'] == '1' ? 'checked' : ''; ?> >

①
$('passcheck').onclick = function () {
$('password').readOnly = false;
$('password').className = 'Required';
$('password').value = '';
}
②
$('passcheck').onclick = function () {
var d = document.getElementById('password');
if ($('passcheck') == '1' ){
d.className = 'Required';
d.value = '';
} else {
d.value = '******';
}
}

行動規範の内容に同意します

回答2件

ちょっと質問の意図が伝わってきませんが
passcheckのチェックありなしで、passwordのreadonlyを調整するだけならこう

javascript
1
2<script>
3window.addEventListener('DOMContentLoaded', ()=>{
4  document.querySelector('#passcheck').addEventListener('change',(e)=>{
5    var t=e.target;
6    var pw=document.querySelector('#password');
7    if(t.checked){
8      pw.removeAttribute("readonly");
9    }else{
10      pw.setAttribute("readonly","1");
11    }
12  });
13});
14</script>
15
16<input type="checkbox" id="passcheck">
17<input type="text" id="password" value="test" readonly>

valueとかrequireのくだりがちょっと意味不明です

投稿2020/08/13 05:08

編集2020/08/13 05:08

yambejp

総合スコア116740

タグにjQueryがありませんが、おそらく使われてると思うので使っています。
使ってなければ言ってください。

JavaScript
1jQuery(function ($) {
2  const password = $("#password");
3  const passCheck = $("#passcheck");
4  const doPassCheck = function () {
5    const isPassCheck = passCheck.prop("checked");
6    password
7      .toggleClass("Required", isPassCheck)
8      .prop("readonly", !isPassCheck)
9      .val(isPassCheck ? "" : "**");
10  };
11  doPassCheck();
12  passCheck.on("change", doPassCheck);
13});
14

jQueryを使わないバージョン

JavaScript
1document.addEventListener("DOMContentLoaded", function() {
2  const password = document.querySelector("#password");
3  const passCheck = document.querySelector("#passcheck");
4  const doPassCheck = function () {
5    password.classList.toggle("Required", passCheck.checked);
6    password.readOnly = !passCheck.checked;
7    password.value = passCheck.checked ? "" : "**";
8  };
9  doPassCheck();
10  passCheck.addEventListener("change", doPassCheck);
11});