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

Question

下面的应用程序有两个 select 输入（month_abbr 和 month_full）和一个复选框输入（abbr）。我想在 abbr 为 FALSE 时隐藏 month_abbr 及其标签 并隐藏 month_full 及其标签 当 abbr 是 TRUE。我在 shinyjs::toggle 中使用 selector 参数到 select 每个表单元素，但是 select 或我使用的 $('#element').parent('.form-group') 不起作用。

我想这可能是因为 select 输入本身有 form-group class (form-group shiny-input-container)，所以也许 select 或者只有 selects 输入而不是我在表单中手动创建的标签。但这似乎并非如此，因为 selector 也不适用于 select 输入。

下面的屏幕截图显示，无论复选框的值如何，select两个输入都是可见的输入：

应用程序：

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)

我试过的其他select或：

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

仅通过其 ID (selector = "#month_full") 选择输入会隐藏 select 输入但不会隐藏标签：

Answer 1

如果您想要 show/hide 的 ui-elements 数量有限，那么只给 div-elements 一个 id 属性并调用 id 可能会更容易=12=] 用 id 代替 selector。例如，

library(shiny)
library(shinyjs)

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

        div(id = "div_month_abb",
            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(id = "div_month_full",
            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(id = "div_month_abb", condition = input$abbr)

       toggle(id = "div_month_full", condition = !input$abbr)

      })
}


shinyApp(ui,server)

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

Toggling a form-horizontal input and its label using shinyjs

jquery

html

r

shiny

shinyjs