ボタンを特定の条件でDisableにする
チェックボックスにチェックが入っていない場合にボタンを押せなくする
- [チェックボックス] と [ボタン] を配置する。
- [ボタン] の [無効にする条件] に
{{ !checkbox1.value }}
と入力する。
インプットに値が入っていない場合にボタンを押せなくする
- [インプット] と [ボタン] を配置する。
- [ボタン] の [無効にする条件] に
{{ input1.value === '' }}
と入力する。
インプットのバリデーションに成功していない場合にボタンを押せなくする
- [インプット] と [ボタン] を配置する。
- [インプット] の [バリデーション] に任意のバリデーションを追加する。
- [ボタン] の [無効にする条件] に
{{ input1.invalid }}
と入力する。
論理演算子を用いてボタンを押せない条件を設定する
- [インプット] を 2 つと [ボタン] を配置する。
- [input1] と [input2] にそれぞれバリデーションを設定する。
- [ボタン] の [無効にする条件] に
{{ input1.invalid || input2.invalid }}
と入力する。
ユーザーに対してボタン非表示の条件を設定する
- [データフロー] 内の [新規作成] をクリックし、データフロー名を
isButtonDisabled
に変更する。 - [アクションの選択] で
JavaScript
を選択する。 - [スクリプトの入力] で以下のように記述する。
※example01@querier.io
とexample02@querier.io
の 2 つのアカウントがログインした際にボタンを押せなくする場合を想定
const disabledEmails = [
"example01@querier.io",
"example02@querier.io"
]
return disabledEmails.includes({{ querierCurrentUser.email }})
- [ボタン] の [エディター] を開き、 [ラベル] に
{{ isButtonDisabled.data ? "実行する権限がありません" : "実行する" }}
と入力する。 - [無効にする条件] に
{{ isButtonDisabled.data }}
と入力する。