Skip to main content

ボタンを特定の条件でDisableにする

チェックボックスにチェックが入っていない場合にボタンを押せなくする​

  1. [チェックボックス] と [ボタン] を配置する。
  2. [ボタン] の [無効にする条件] に {{ !checkbox1.value }} と入力する。

インプットに値が入っていない場合にボタンを押せなくする​

  1. [インプット] と [ボタン] を配置する。
  2. [ボタン] の [無効にする条件] に {{ input1.value === '' }} と入力する。

インプットのバリデーションに成功していない場合にボタンを押せなくする​

  1. [インプット] と [ボタン] を配置する。
  2. [インプット] の [バリデーション] に任意のバリデーションを追加する。
  3. [ボタン] の [無効にする条件] に {{ input1.invalid }} と入力する。

論理演算子を用いてボタンを押せない条件を設定する​

  1. [インプット] を2つと [ボタン] を配置する。
  2. [input1] と [input2] にそれぞれバリデーションを設定する。
  3. [ボタン] の [無効にする条件] に {{ input1.invalid || input2.invalid }} と入力する。

アカウントに対してボタン非表示の条件を設定する​

  1. 右下の [状態管理] をクリックし、 [グローバル] タブの [querierCurrentUser] 内の email に現在自分がログインしているメールアドレスが入っていることを確認する。
  2. [データフロー] 内の [新規作成] をクリックし、データフロー名をisButtonDisabled に変更する。
  3. [アクションの選択] で JavaScript を選択する。
  4. [スクリプトの入力] で以下のように記述する。　
    ※ basic.bankTransfer02@querier.io と basic.bankTransfer03@querier.io の2つのアカウントがログインした際にボタンを押せなくする場合を想定
const disabledEmails = [
  "basic.bankTransfer02@querier.io",
  "basic.bankTransfer03@querier.io"
]

return disabledEmails.includes({{ querierCurrentUser.email }})
  1. [ボタン] の [エディター] を開き、 [ラベル] に {{ isButtonDisabled.data ? "実行する権限がありません" : "実行する" }} と入力する。
  2. [無効にする条件] に {{ isButtonDisabled.data }} と入力する。