如何基于表单域选择动态地启用/禁用按钮？

2024-05-17 • 问答

假设我有如下所示的开关，

var switchKeyValue = CardService.newKeyValue()
    .setTopLabel("Switch key value widget label")
    .setContent("This is a key value widget with a switch on the right")
    .setSwitch(CardService.newSwitch()
        .setfieldName("form_input_switch_key")
        .setvalue("form_input_switch_value")
        .setOnChangeaction(CardService.newaction()
            .setfunctionName("handleSwitchChange")));

还有一个按钮，如下所示，

var textButton = CardService.newTextButton()
    .setText("Open Link")
    .setOpenLink(CardService.newOpenLink()
        .setUrl("https://www.google.com"))

我注意到Button有一个方法setDisabled(disabled)。可以根据开关选择来利用它来禁用/启用按钮吗？

是的，有可能，请参见以下示例：

我们需要有一个用于保存并退还卡的功能：

function createCard(val) {

  var action = CardService.newAction().setFunctionName('toggleIt').setParameters({val: val.toString()});

  var textButton = CardService.newTextButton()
    .setText("Open Link")
    .setDisabled(val)
    .setOpenLink(CardService.newOpenLink()
        .setUrl("https://www.google.com"));

  var textButton2 = CardService.newTextButton()
    .setText('Click me!')
    .setOnClickAction(action);


  var section = CardService.newCardSection().setHeader('Disabled/Enabled').addWidget(textButton);
  var section2= CardService.newCardSection().setHeader('Switcher').addWidget(textButton2);


  var card = CardService.newCardBuilder()
    .setHeader(CardService.newCardHeader()
    .setTitle('My toggle button'))
    .addSection(section)
    .addSection(section2)
    .build();

  return card;
}

如您所见，我们向该函数传递了一个参数：val。

此参数保存按钮的状态，每当您单击button2时，它都会调用一个动作：toggleIt

toggleIt函数将反转val值的状态并使用updateCard

更新卡

您在这里：

function toggleIt(e) {
  var boolVal = e.parameters.val == 'true' ? true : false;
  var val = !boolVal;
  return CardService.newNavigation().updateCard(createCard(val));
}

您可以轻松地使其适应您的代码;）

如何基于表单域选择动态地启用/禁用按钮？

Scorpio_Huang 回答：如何基于表单域选择动态地启用/禁用按钮？

大家都在问