ユーザー掲示板：「data-fk-disabled-to」の使用方法について
トピックの内容と返信
-
【1】KN様のトピック投稿
2022年1月7日 18:20:20お世話になります。
「data-fk-disabled-to」の用法について、いくつかご教示お願い致します。
【1】
「data-fk-disabled-to」の対象となるフィールドを、
複数にすることは可能なのでしょうか？
『サンプルフォーム：要素サンプル』にある、
『「その他」テキスト入力』のように、
「その他」にチェックされた場合、テキストフィールドが入力可能になる（disabledが外れる）仕様の発展形として、
複数の入力項目を対象として、一括で制御したいと考えております。
例としまして、
アクセス時には、テキストフィールドとセレクトボックスが、disabledになっていて、
ラジオボタン「はい／いいえ」の「はい」を選択すると、
テキストフィールドとセレクトボックスが、入力・選択可能になるような、
フォームを作りたいと考えます。
（例1）
--------------------------------------------------
<label><input type="radio" name="q1" value="はい"<?= $q1->checked('はい') ?> data-fk-with="_q1_group" data-fk-disabled-to="_q1_group"> はい</label><br>
<label><input type="radio" name="q1" value="いいえ"<?= $q1->checked('いいえ') ?>> いいえ</label><br>
<?= $q1->error_tag() ?>
<dl>
<dt>「はい」の場合、氏名／続柄をご入力ください</dt>
<dd data-fk-group="_q1_group">
氏名 <input type="text" name="name" value="<?= $name ?>">
<?= $name->marker_tag() ?>
<br>
続柄
<select name="relate">
<option value="">--- 選択してください ---</option>
<option value="配偶者"<?= $relate->selected('配偶者') ?>>配偶者</option>
<option value="息子"<?= $relate->selected('息子') ?>>息子</option>
<option value="娘"<?= $relate->selected('娘') ?>>娘</option>
</select>
<?= $relate->marker_tag() ?>
<?= $_q1_group->error_tag() ?>
</dd>
</dl>
--------------------------------------------------
例1のようにしたところ、
groupでは上手くいかないようで、
また「data-fk-disabled-to」の値（引用符内）を「name relate」や「'name','relate'」のように複数にしてみても、
何も起こりませんでした。
複数指定の場合の記述方法に決まりはあるのでしょうか？
（※それぞれ単独で指定した場合は問題無く制御されることは確認できています）
もし、現在の最新版の仕様にて、
複数の項目を対象とすることが可能なようでしたら、
その方法をご教示いただけると幸いです。
現在の最新版の仕様においては、
ひとつの項目のみ指定可能（複数項目を対象にするのは不可能）ということであれば、諦めますので問題ございません。
【2】
「data-fk-disabled-to」の対象となるフィールドをひとつとした場合ですが、、
「data-fk-disabled-to」をラジオボタンで使用した場合に、
ラジオボタンの選択を変更した場合でも、
連動するフィールドはdisabledには戻らないのでしょうか？
（例2）
--------------------------------------------------
<label><input type="radio" name="q1" value="はい"<?= $q1->checked('はい') ?> data-fk-with="name" data-fk-disabled-to="name"> はい</label><br>
<label><input type="radio" name="q1" value="いいえ"<?= $q1->checked('いいえ') ?>> いいえ</label><br>
<?= $q1->error_tag() ?>
<dl>
<dt>「はい」の場合、氏名をご入力ください</dt>
<dd>
氏名 <input type="text" name="name" value="<?= $name ?>">
<?= $name->marker_tag() ?>
<?= $name->error_tag() ?>
</dd>
</dl>
--------------------------------------------------
例2のようにしたところ、
ラジオボタン「はい／いいえ」の「はい」を選択すると、テキストフィールドが入力可能になる（disabledが外れる）ようにできるのですが、
「いいえ」に変更した場合には、テキストフィールドのdisabledは戻らないのでしょうか？
サンプルフォームにあるようなチェックボックスでの連動の場合は、
チェックを外すと元のdisabledに戻るため、
同じような挙動をラジオボタンでも出来たら良いなと考えております。
もし何かしら設定方法があるようでしたら、
ご教示いただけると幸いです。
こちらも、現在の最新版の仕様においては不可能ということでしたら、
諦めますので、問題ございません。
以上でございます。
お手数をお掛けしますが、ご確認の程、よろしくお願いいたします。 -
【2】事務局T様の返信
2022年1月11日 17:38:06ご連絡ありがとうございます。
「data-fk-disabled-to」に半角カンマで要素名をつなげて書くことで複数要素が指定できる改修を行いました。
最新バージョン(1.2.18)の formkit/app/fk.js を上書きし、以下のような属性値に修正してみてください。
<input type="radio" name="q1" value="はい" data-fk-disabled-to="name,relate">
※分かりやすくするため他の属性は省略してます。
また、選択を戻しても disabled が戻らない問題も修正しておりますのでそちらの挙動も合わせてご確認ください。
実際の挙動を動画キャプチャしましたので、以下のリンク（２つ目）からご参照ください。
以上、ご確認いただけましたら幸いです。 -
【3】KN様の返信
2022年1月12日 12:53:32お世話になります。
ご返信、ご対応ありがとうございます。
「最新バージョン(1.2.18)」をダウンロードし、
「formkit/app/fk.js」のみ上書きして挙動確認いたしました。
複数要素を指定する件に関しては、
問題無く指定でき、挙動も問題無いことが確認できました。
（参考URLの画像内のキャプチャ1枚目）
しかしながら、
1ページ内に『複数の「data-fk-disabled-to」』が存在すると、
おそらく『最後に記述をした「data-fk-disabled-to」のみが正しく機能』するようです。
（参考URLの画像内のキャプチャ3枚目）
キャプチャ3枚目のHTML
--------------------------------------------------
<table>
<tbody>
<tr>
<th class="fk-req"><p>いずれかを選んでください</p></th>
<td>
<label><input type="radio" name="radio1" value="はい" data-fk-with="name1,relate1" data-fk-disabled-to="name1,relate1"> はい</label><br>
<label><input type="radio" name="radio1" value="いいえ" data-fk-with="check1[]" data-fk-disabled-to="check1[]"> いいえ</label><br>
<label><input type="radio" name="radio1" value="無回答"> 無回答</label><br>
<?= $radio1->error_tag() ?>
<hr>
<dl>
<dt>「はい」の場合、氏名／続柄をご入力ください。</dt>
<dd data-fk-group="_group1">
氏名 <input type="text" name="name1" value="">
<br>
続柄
<select name="relate1">
<option value="">--- 選択してください ---</option>
<option value="配偶者">配偶者</option>
<option value="息子">息子</option>
<option value="娘">娘</option>
<option value="父">父</option>
<option value="母">母</option>
</select>
<?= $_group1->error_tag() ?>
</dd>
</dl>
<hr>
<dl>
<dt>「いいえ」の場合、チェックしてください</dt>
<dd>
<label><input type="checkbox" name="check1[]" value="選択肢1"> 選択肢1</label><br>
<label><input type="checkbox" name="check1[]" value="選択肢2"> 選択肢2</label><br>
<label>
<input type="checkbox" name="check1[]" value="その他" data-fk-with="check1_other" data-fk-disabled-to="check1_other">
その他（ご入力ください）<br>
<input type="text" name="check1_other" value="">
<?= $check1_other->error_tag() ?>
</label>
<?= $check1->error_tag() ?>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
--------------------------------------------------
上記ソースの場合、
チェックボックス「check1」の「その他」に指定した
「data-fk-disabled-to="check1_other"」のみが、
正常に機能しています。
（テキストフィールド「check1_other」のdisabled切り替えのみ正常）
誠に恐れ入りますが、
この点についてご確認いただけますでしょうか。 -
【4】KN様の返信
2022年1月12日 13:01:17追記いたします。
ラジオボタンにて「選択を戻しても disabled が戻らない問題」についても、
解消されたことが確認できております。
（選択を変更すると、 disabled に戻る）
こちらもご対応ありがとうございました。
引き続きよろしくお願いいたします。 -
【5】事務局T様の返信様の返信
2022年1月13日 08:56:35事務局です。
細かくお調べいただきありがとうございます。
おっしゃるとおり不具合を確認できましたので、修正してバージョンを上げました。（1.2.19）
お手数ですが、再度ダウンロードしてお試しいただければと存じます。（最新の formkit/app/fk.js を上書きしてください）
尚、ご連絡いただきましたフォームHTMLを若干調整しておりますので、以下ご参考ください。
--------------------------------------------------
<table>
<tbody>
<tr>
<th class="fk-req"><p>いずれかを選んでください</p></th>
<td>
<label><input type="radio" name="radio1" value="はい" data-fk-with="name1,relate1" data-fk-disabled-to="name1,relate1"> はい</label><br>
<label><input type="radio" name="radio1" value="いいえ" data-fk-with="check1[]" data-fk-disabled-to="check1[],check1_other"> いいえ</label><br>
<label><input type="radio" name="radio1" value="無回答"> 無回答</label><br>
<?= $radio1->error_tag() ?>
<hr>
<dl>
<dt>「はい」の場合、氏名／続柄をご入力ください。</dt>
<dd data-fk-group="_group1">
氏名 <input type="text" name="name1" value="">
<br>
続柄
<select name="relate1">
<option value="">--- 選択してください ---</option>
<option value="配偶者">配偶者</option>
<option value="息子">息子</option>
<option value="娘">娘</option>
<option value="父">父</option>
<option value="母">母</option>
</select>
<?= $_group1->error_tag() ?>
</dd>
</dl>
<hr>
<dl>
<dt>「いいえ」の場合、チェックしてください</dt>
<dd>
<label><input type="checkbox" name="check1[]" value="選択肢1"> 選択肢1</label><br>
<label><input type="checkbox" name="check1[]" value="選択肢2"> 選択肢2</label><br>
<label>
<input type="checkbox" name="check1[]" value="その他" data-fk-disabled-to="check1_other">
その他（ご入力ください） <input type="text" name="check1_other" value="">
<?= $check1_other->error_tag() ?>
</label>
<?= $check1->error_tag() ?>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
--------------------------------------------------
（config.php 例）
# - 各要素のバリデート
'list' => [
'radio1' => REQ() -> ERRORSET('選択必須です。'),
'name1' => REQ('radio1','はい'),
'relate1' => REQ('radio1','はい'),
'_group1' => ALLOK('name1','relate1'),
'check1' => REQ('radio1','いいえ') -> ERRORSET('選択必須です。'),
'check1_other' => REQ('check1','その他'),
],
--------------------------------------------------
上記の設定での挙動を、前回同様に実際に動画キャプチャしましたので、以下のリンク（２つ目）からご参照ください。
以上、ご確認いただければと存じます。 -
【6】KN様の返信
2022年1月13日 12:10:51お世話になります。
最新版（1.2.19）のfk.jsを上書きし、解消されたことを確認いたしました。
迅速なご対応ありがとうございました。
またHTMLの記述もご教示いただきありがとうございました。
一部、その挙動についてご確認いただきたい点がございます。
希望する挙動としては、
(1)「いいえ」を選んだ時点ではチェックボックスのみ disabled 解除（「その他」のテキストは disabled のまま）
(2)チェックボックスで「その他」を選ぶとテキストの disabled 解除（「その他」以外を選択したときは disabled のまま）
(3)チェック後／テキスト入力後などに「はい／無回答」を選ぶとチェックボックスとテキストを再度 disabled 化
なのですが、
<label><input type="radio" name="radio1" value="いいえ" data-fk-with="check1[]" data-fk-disabled-to="check1[],check1_other"> いいえ</label>
の
『data-fk-disabled-to="check1[],check1_other"』
の部分につきまして、
いただいたHTMLの通り記述しますと、
(1)の時点で、テキストも disabled が解除されてしまうようです。
（参考URLの画像内のキャプチャ1枚目）
その後、「その他」以外のチェックをするか、一度「その他」をチェックした後に再度チェックを外せば、
テキストは再度 disabled になるようですが、
無選択のままでもテキストに入力ができてしまうことになります。
（動画 00:20あたりでも、「いいえ」を選んだ時点でテキストが一時的に有効になっていることが見受けられます）
チェックボックスが無選択なのに、
テキストだけ入力できてしまうという状況は、
できれば避けたいと考えております。
試しに、元のHTMLである、
<label><input type="radio" name="radio1" value="いいえ" data-fk-with="check1[]" data-fk-disabled-to="check1[]"> いいえ</label>
で試してみましたが、
この場合、(1)(2)は問題ないのですが、
(3)の時点でテキストが再度 disabled 化にならず、入力／修正できる状態になってしまいます。
（チェックボックスのみ再度 disabled 化される）
そのため、この元のHTMLではダメだということは分かりました。
（参考URLの画像内のキャプチャ2枚目）
希望する挙動に近いのは、
ご教示いただいた前者のHTMLですが、
『(1)「いいえ」を選んだ時点ではチェックボックスのみ disabled 解除（「その他」のテキストは disabled のまま）』
を実現させるために、
何か良い方法はございませんでしょうか？
度々お手数をお掛け致しますが、
ご確認、ご指摘の程、よろしくお願いいたします。 -
【7】事務局T様の返信
2022年1月13日 13:53:58事務局です。
ご返信ありがとうございます。
『「いいえ」にチェックが入っている状態＋「その他」チェックボックスが disabled でない＋及びチェックが入っている状態』のみに、check1_other テキストBOXを入力できるようにしたい、ということかと思いますが、申し訳ございませんが条件が複雑すぎて現行のFormKitの仕様ではこれ以上の調整は難しいです。
そこで、JavaScript を直接書いてしまうという手があります。（ちょっと無理やり感はありますが・・）
fk.js をロードしてる <script> タグの下に以下を追記してみてください。
--------------------------------------------------
<script src="formkit/app/fk.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
setInterval(function(){
$fk('[name=check1_other]').prop('disabled', !$fk('[name="check1[]"][value="その他"]:checked:enabled').length)
}, 100); // 100msごとにその他チェックボタンの状態を判定してテキストエリアを更新
})
</script>
--------------------------------------------------
上記のスクリプトは、「その他」チェックボタンの状態を0.1秒おきにチェックしてその状態からテキスト入力ボックスの状態（有効/無効）を更新するというものです。
FormKit のメインの挙動とは別物になりますので確実にチェックボックスと連動します。（$fk というオブジェクトを使ってますが、中身は jQuery の派生です。）
これはFormKit自体の機能ではないのでサポート対象外ですが、これでお望みの挙動になるかもしれませんので、是非お試しいただければ存じます。
以上、ご確認のほど何卒よろしくお願いいたします。 -
【8】KN様の返信
2022年1月13日 14:43:56お世話になります。
ご対応ありがとうございます。
ご提示いただいたJavaScript直書きで、
希望する挙動になりました。
当方で期待する機能としては充分と考えますので、
こちらで試させていただきます。
複雑な要望内容にもかかわらず、
ご丁寧にご対応、ご教示いただき、誠にありがとうございました。