jQuery UI の Menu による多階層メニュー全体の有効無効切替

投稿日: 2013年4月3日作成者: alphasis

jQuery UI の Menu Widget による多階層メニュー全体の有効/無効を、ラジオボタンで切り替える方法。

実装例（サンプル）

有効無効

実装例（サンプル）の動作について

「有効」ラジオボタンをクリックし、チェックすると、多階層メニュー全体を有効化する。

「無効」ラジオボタンをクリックし、チェックすると、多階層メニュー全体を無効化する。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>

JavaScript

<script>
jQuery( function() {
jQuery( '#jqueryUiButtonRadio' ) . buttonset();
jQuery( '#jqueryUiButtonRadio input[name^=jqueryUiButtonRadio]' ) . change( function () {
var checked = jQuery( '#jqueryUiButtonRadio1' ) . prop( 'checked' );
if ( checked ) {
jQuery( "#sampleMenu" ).menu( { disabled: false } );
} else {
jQuery( "#sampleMenu" ).menu( { disabled: true } );
}
} ).change();
} );
</script>

CSS

<style>

</style>

HTML

<ul id="sampleMenu">
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a>
<ul id="sampleMenu">
<li><a href="#">メニュー２－１</a>
<ul id="sampleMenu">
<li><a href="#">メニュー２－１－１</a></li>
<li><a href="#">メニュー２－１－２</a></li>
<li><a href="#">メニュー２－１－３</a></li>
</ul>
</li>
<li><a href="#">メニュー２－２</a></li>
<li><a href="#">メニュー２－３</a></li>
</ul>
</li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a>
<ul id="sampleMenu">
<li><a href="#">メニュー４－１</a></li>
<li><a href="#">メニュー４－２</a></li>
<li><a href="#">メニュー４－３</a></li>
</ul>
</li>
<li><a href="#">メニュー５</a></li>
</ul>

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Menu, メニューパーマリンク