Question

下面的应用程序有两个selectInputs（front code: <script src="https://cdn.jsdelivr.net/npm/crypto-js@3.1.9-1/crypto-js.js"></script> let encrypted = CryptoJS.AES.encrypt("txt", "Secret Passphrase").toString(); backend code: const cryptojs = require("crypto-js"); let txt = cryptojs.AES.decrypt(encrypted , "Secret Passphrase").toString(cryptojs.enc.Utf8);和month_abbr）和一个checkboxInput（month_full）。我想在abbr为month_abbr时隐藏abbr 及其标签，并在FALSE隐藏month_full 及其标签 abbr是TRUE。我正在使用selector中的shinyjs::toggle参数来选择每个表单元素，但是我正在使用的$('#element').parent('.form-group')选择器不起作用。

我认为这可能是因为selectInputs本身具有form-group类（form-group shiny-input-container），所以选择器可能只选择输入，而不选择我在表单中手动创建的标签。但这似乎并非如此，因为选择器也不适用于selectInputs。

下面的屏幕快照显示，无论checkboxInput的值如何，两个selectInputs均可见：

应用程序：

library(shiny)
library(shinyjs)

ui<-shinyUI(
  fluidPage(
    useShinyjs(),
    tags$form(
      class = "form-horizontal", action="/action_page.php",

      div(
        class = 'form-group', 
        tags$label(class = 'control-label col-sm-2', `for` = 'month_abb', 'Month (abbr.)'),
        div(
          class = 'col-sm-4', 
          selectInput('month_abb', '', month.abb)
        )
      ), 

      div(
        class = 'form-group', 
        tags$label(class = 'control-label col-sm-2', `for` = 'month_full', 'Month (full)'),
        div(
          class = 'col-sm-4', 
          selectInput('month_full', '', month.name)
        )
      ), 

      checkboxInput('abbr', 'Abbreviated')

    )
  )
)

server<-function(input, output) {

  observe({

    toggle(selector = "$('#month_full').parent('.form-group')", condition = !input$abbr)

    toggle(selector = "$('#month_abbr').parent('.form-group')", condition = input$abbr)

  })

}


shinyApp(ui,server)

我尝试过的其他选择器：

$('#month_full').parentsUntil('form.form-horizontal')-我不知道为什么这没用？
$('#month_full input label')（尝试同时选择输入和标签）。

仅通过其ID（selector = "#month_full"）选择输入会隐藏selectInput，而不会隐藏标签：

Answer 1

如果您要显示/隐藏的用户界面元素数量有限，只需给div-elements一个id属性并使用{{1 }}，而不是shinyjs::toggle。例如，

id

使用ShinyJS切换表单水平输入及其标签

1 个答案: