クエステトラ(Questetra）でJavascriptを活用しよう（チェックボタン選択値の活用）
前回に引き続きJavascriptを利用方法です。今回は、チェックボックスの項目を動的に増やしたり、減らしたりする方法です。
ある条件において、チェックボックスの数を増減させたいということはあるかと思います。当社の場合には、契約書のレビューをする際に、契約書の種類によりチェックする項目が変わります。Javascriptを利用しないとなると、全てのチェックボックスを表示しておいて、「○○を選択した場合には、☓☓は対象ではありません」というメッセージを出しておくしかありませんでした。
Javascritを使うことで、「○○を選択したら、必要チェックボックス以外は、取消線にして、チェックできなくする。」ということが可能になります。（以下の図は、ある契約種別を選択すると、指定した項目について、取り消し線とチェックボックスがチェックできなくなっています）
以下のスクリプト例は、契約書種類の選択肢セレクト(データ項目番号10）の選択肢IDが1の場合、チェックボックス（データ項目番号29） の選択肢IDの2に取消線を引き、チェック不可としています。
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).ready(function(){
var checkedVal = jQuery('input[name="data[10].selects"]:checked').val();
if (checkedVal == 1 ) { // 選択肢IDが1の場合には、リスクチェックリストを減らす
if (checkedVal == 1 ) { // 選択肢IDが1の場合には、リスクチェックリストを減らす
jQuery('input[name="data[29].selects"][value="1"]').closest("tr").css("text-decoration", "line-through"); //取消線
jQuery('input[name="data[29].selects"][value="1"]').prop("disabled",true);//チェックできなくする
}//IF文終了
});
</script>
</script>
ライン数としては、とても少ないのですが、サンプルプログラムが無く、ここに行きつくまでかなりの時間を要してしまいました。（CSSの知識が無かったのも時間がかかった原因ですね）
また、取消線ではなく、そのチェックボックス自体を非表示にしたい場合には、以下の２行を実行すると表示されなくなる。
jQuery('input[name="data[29].selects"][value="8"]').hide(); //選択肢IDが8のチェックボックスの□だけが消える。
var selectValObj = jQuery('input[name="data[29].selects"][value="8"]').map(function() {
return jQuery(this).parent().find("label").text("");//ラベル文字を消す
});
var selectValObj = jQuery('input[name="data[29].selects"][value="8"]').map(function() {
return jQuery(this).parent().find("label").text("");//ラベル文字を消す
});
今回のスクリプトでは、ラベル文字を消す方法を探すのに手間取りました。hide()だけでは、チェックボックスの□だけが消えるだけでラベル文字が消えません。明示的にラベルを消すjQueryが必要になります。