exValidation(jQuery.validation.js含め)で今まで一番要望が多かったのですが、汎用的にするのは微妙かなぁと思って実装していませんでした。以前WebDesigningで連載しているjQuery Labで実装方法を書いたものを、もう面倒なので組み込みました。これで割と簡単に使えるんじゃないでしょうか。表示非表示とかはできません、あくまで必須をトグルにできるだけです。表示非表示も実装したい場合はがんばってアドオンしてください。(アドオンは割と簡単にできます)
チェックボックスで必須をトグルにできるやつのサンプル
実装方法
実装方法はサンプルに尽きるのですが、ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください。
<tr>
<th>Favorite<span>*</span></th>
<td>
<span id="fav">
<label for="f1"><input type="checkbox" id="f1" name="fav[]" value="f1">books</label>
<label for="f2"><input type="checkbox" id="f2" name="fav[]" value="f2">music</label>
<label for="f3"><input type="checkbox" id="f3" name="fav[]" value="f3">game</label>
<label for="f4"><input type="checkbox" id="f4" name="fav[]" value="f4">study</label>
<label for="f5"><input type="checkbox" id="f5" name="fav[]" value="f5">fishing</label>
<label for="f6"><input type="checkbox" id="f6" name="fav[]" value="f6">other</label>
</span>
</td>
</tr>
<tr>
<th>Favorite Other</th>
<td>
<input type="text" id="favOther" name="favOther" value="">
</td>
</tr>
で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように
- hoge: トグルを発火させるためのチェックボックスのID
- fuga: チェックボックスの状態によって必須をトグルさせるinputのID
ルールを入れておきます。これだけです。
$("form")
.exValidation({
rules: {
fav: "chkgroup chktoggle_f6_favOther",
favOther: "chkrequired"
},
stepValidation: true
});
そんなわけで、実装しましたのでよければ使ってください。
チェックボックスで必須をトグルにできるやつのサンプル