2.1.40. 属性値の動的切替

属性値の動的切替 は、 チェックボックス・ラジオボタン・プルダウン要素の内容に応じて、 特定の要素の属性値を動的に切替えるイベントアクションである。 なお、切替えの対象となる属性値は真偽値型のDOM属性値(readonly/disabled/checked/selected) に限る。

2.1.40.1. コードサンプル

このアクションを実行するイベントは ページ内イベント定義 (もしくは サブウィンドウ内イベント定義 ) を用いて定義する必要がある。

以下のソースコードは、 フォーム内の全てのチェックボックスをON/OFFするチェックボックスを作成する例である。

class属性に allCheck CSSクラスを指定したチェックボックスをクリックすると <event:toggle_property> イベントアクションが実行され、 チェックボックスの全チェック・解除が行われる。

<n:form>
  <event:listen
    event="input[type='checkbox'].allCheck click">
    <event:toggle_property
      title="全てチェック/クリア"
      type="checked"
      toggleTarget="input[type='checkbox']:not('.allCheck')"
      condition=".allCheck">

    </event:toggle_property>
  </event:listen>

  ... (中略) ...

</n:form>

2.1.40.2. 仕様

属性値一覧 [◎ 必須属性 ○ 任意属性 × 無効(指定しても効果なし)]

名称 内容 タイプ サーバ ローカル 備考
type 切替え対象属性 文字列 ◎ ◎ 以下のいずれかを指定する。
- disabled
- readonly
- checkbox
- selected
title 実行する処理の簡単な説明 文字列 × × 設計書表示用
target 属性を切替える対象要素 を指定するセレクタ式 文字列 ◎ ◎  
condition 属性値をtrueに設定する条件を イベント発生元要素が満たすべき セレクタ式の形式で指定する。 文字列 ◎ ◎  
reverse 要素を指定するセレクタ式。 文字列 ○ ○  

2.1.40.3. 内部構造・改修時の留意点

本ウィジェットは以下のファイルによって実装されている。

部品一覧

パス 内容
/WEB-INF/tags/widget/event/toggle_property.tag このウィジェットの実体となるタグファイル
/js/nablarch/ui/event/TogglePropertyAction.js 属性値の切替え機能を実装するイベントアクション