Skip to main content

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

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

  1. [チェックボックス][ボタン] を配置する。
  2. [チェックボックス][ラベル]メンバーを本当に削除しますか? と入力する。
  3. [ボタン][ラベル]削除を実行 と入力する。
  4. [ボタン][無効にする条件]{{ !checkbox1.value }} と入力する。
  5. プレビュー画面でチェックが入っていない場合にボタンが押せなくなっていることを確認する。

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

  1. [インプット][ボタン] を配置する。
  2. [インプット][ラベル]名前を入力 と入力する。
  3. [ボタン][ラベル]メンバーを追加 と入力します。
  4. [ボタン][無効にする条件]{{ input1.value === '' }} と入力する。
  5. プレビュー画面で値が入っていない場合にボタンが押せなくなっていることを確認する。

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

  1. [インプット] を2つと [ボタン] を配置する。
  2. [input1][ラベル]名字を入力 と入力する。
  3. [input2][ラベル]名前を入力 と入力する。
  4. [ボタン][無効にする条件]{{ input1.value === '' || input2.value === ''}} と入力する。
  5. プレビュー画面で両方のインプットに値が入っていない場合にボタンが押せなくなっていることを確認する。

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

  1. 右下の [状態管理] をクリックし、 [グローバル] タブの [querierCurrentUser] 内の email に現在自分がログインしているメールアドレスが入っていることを確認する。
  2. [データフロー] 内の [新規作成] をクリックし、データフロー名をisButtonDisabled に変更する。
  3. [データソースの選択]JavaScript を選択する。
  4. [スクリプトの入力] で以下のように記述する。 
    basic.bankTransfer02@querier.iobasic.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 }} と入力する。
  3. プレビュー画面で正常に動作していることを確認する。