JavascriptのonClickを条件付きで無効化したいです

###前提・実現したいこと
html内でリンククリック時にダイアログの表示がされる機能に条件付きの無効化を実現させたいです。

###発生している問題・エラーメッセージ
リンクは無効にできましたがダイアログが無効にできません。
###ソースコード
html,thymeleaf,JavaScript使用
ここにご自身が実行したソースコードを書いてください

<html> <head> <script type="text/javascript"> function pass_check() {

	// 		パスワードの取得(myPassWord)
	myPassWord = prompt("パスワードを入力してください", "");
	if (myPassWord == "pass") {
		return true;
	} else {
		alert("入力内容に誤りがあります。");
		return false;
	}
}

function disableLink() {

var target = document.getElementById("order");
if("students" == target.value) {
	document.getElementById("a").removeAttribute("href");
} else {
	document.getElementById("b").removeAttribute("href");
}

}
</script>

</head> <body onload="disableLink()"> <ul> <li><a id="a" href="xxxx" onClick="return pass_check();">a</a></li> <li><a id="b" href="xxxx">b</a></li> <input type="hidden" id="order" value="students" /> </body> </html>

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

回答3件

動作がおかしい原因は A要素や onClick の仕様を勘違いしていることです。
A要素内にonClickが仕込んである場合、onClickを評価して以下のように動作します。

戻り値が true ：href属性の中身のURLにアクセス
戻り値が false ：アクセスする処理を中断する

質問者さんの意図した挙動にするには下記のように書き換えてください。
×：A要素内のhref属性を削除する
○：A要素内のonClick属性の値をreturn falseに変更する

投稿2015/11/08 09:25

miyabi-sun

総合スコア21158

TatsuyaNozawa

2015/11/08 10:52

解答ありがとうございます。その状態に書き換えたところ、根本は解決できましたが、リンク先に遷移する制御ができなかったため、本解答を参考にいろいろとさぐってみます。

miyabi-sun

2015/11/08 14:10

あー・・・なるほど！質問者さんが実現したい内容がわかりました。 `<input type="hidden" value="student">`とあるように、ロール「学生」のユーザーがアクセスした場合はパスワードを入力すること無くリンク先に画面遷移して欲しいというわけですね？でしたら`return false`を`return true`と置き換えてください。もしくはhref属性は残したままonClick属性を削除しましょう。これで完全に意図した挙動になるかと思います。

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

ベストアンサー

javascript
1if("students" == target.value) { 
2        document.getElementById("a").removeAttribute("href"); 
3        document.getElementById("a").removeAttribute("onclick");