使用 shinyjs 切换表单水平输入及其标签
Posted
技术标签:
【中文标题】使用 shinyjs 切换表单水平输入及其标签【英文标题】:Toggling a form-horizontal input and its label using shinyjs 【发布时间】:2019-11-07 20:56:36 【问题描述】:下面的应用程序有两个 selectInputs(month_abbr
和 month_full
)和一个 checkboxInput(abbr
)。我想在abbr
为FALSE
时隐藏month_abbr
及其标签,并在abbr
为TRUE
时隐藏month_full
及其标签。我在shinyjs::toggle
中使用selector
参数来选择每个表单元素,但我使用的选择器$('#element').parent('.form-group')
不起作用。
我认为这可能是因为 selectInputs 本身具有 form-group
类(form-group shiny-input-container
),所以也许选择器只选择输入而不是我在表单中手动创建的标签标签。但情况似乎并非如此,因为选择器也不适用于 selectInputs。
下面的截图显示,无论 checkboxInput 的值如何,两个 selectInput 都是可见的:
应用程序:
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 但不会隐藏标签:
【问题讨论】:
你试过conditonalPanel
吗?此外,您是否有理由在单独的标签中定义标签而不是使用selectInput
的标签参数?
@Joris 我无法在此处使用conditionalPanel
,因为输入作为列表提供给创建水平表单的辅助函数,因此将它们包装在conditionalPanel
中会将其丢弃。我正在使用单独的标签标签,因为我希望标签出现在输入的左侧,就像以水平形式一样。你知道为什么selector = $('#month_full').parentsUntil('form.form-horizontal')
不起作用吗?我以为我正确使用了parentsUntil()
方法。
【参考方案1】:
如果您想要显示/隐藏的 ui 元素数量有限,给 div 元素赋予 id
属性并使用 id
而不是 @987654324 调用 shinyjs::toggle
可能更容易@。例如,
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 切换表单水平输入及其标签的主要内容,如果未能解决你的问题,请参考以下文章