启用带有多个输入的选项卡并使用一个输入禁用选项卡答案

【问题标题】：enable tab with multiple input and disable tab with one input启用带有多个输入的选项卡并使用一个输入禁用选项卡
【发布时间】：2019-01-04 23:16:31
【问题描述】：

我正在开发一个应用程序，其中用户选择一个输入，该选项卡将被禁用，如果用户选择多个输入，则该选项卡将被启用。谁能帮我这个。我已经发布了可重现的示例。

 library(shiny)
 library(shinyjs)

 shinyApp(
  ui = fluidPage(
  useShinyjs(),


selectizeInput("foo", "Show tab2",selected = NULL,choices=c("a","b","c","d"), multiple = TRUE),


     tabsetPanel(


  id = "navbar",
  tabPanel(title = "tab1",
           value = "tab1",
           h1("Tab 1")
  ),
  tabPanel(title = "tab2",
           value = "tab2",
           h1("Tab 2")
  ),
  tabPanel(title = "tab10",
           value = "ta10",
           h1("Tab 10")
  ),
  tabPanel(title = "tab99",
           value = "tab99",
           h1("Tab 99")
  ),
  tabPanel(title = "tab19",
           value = "tab19",
           h1("Tab 19")
  ),
  tabPanel(title = "tab09",
           value = "tab09",
           h1("Tab 09")
  ),
  tabPanel(title = "tab3",
           id="pqr",
           value = "tab3",
           h1("Tab 3")
  )
)


  ),
  server = function(input, output) {
   observe({
    toggle(condition = input$foo, selector = "#navbar li a[data-      value=tab3]")
     })

【问题讨论】：

标签： r shiny shinyjs

【解决方案1】：

使用@Dean Attali 的答案here 并根据我们可以做的选择的长度：

library(shiny)
library(shinyjs)

jscode <- '
  shinyjs.init = function() {
  $(".nav").on("click", ".disabled", function (e) {
  e.preventDefault();
  return false;
  });
  }'

css <- '
  .disabled {
  background: #eee !important;
  cursor: default !important;
  color: black !important;
  }'

shinyApp(
    ui = fluidPage(
      useShinyjs(),
  extendShinyjs(text = jscode, functions = "init"),
      tags$style(css),


      selectizeInput("foo", "Show tab2",selected = NULL,choices=c("a","b","c","d"), multiple = TRUE),


      tabsetPanel(


        id = "navbar",
        tabPanel(title = "tab1",
                 value = "tab1",
                 h1("Tab 1")
        ),
        tabPanel(title = "tab2",
                 value = "tab2",
                 h1("Tab 2")
        ),
        tabPanel(title = "tab3",
                 id="pqr",
                 value = "tab3",
                 h1("Tab 3")
        )
      )


    ),
    server = function(input, output) {
      observe(print(length(input$foo)==1))
      observe({
        toggleClass(selector = "#navbar li a[data-value=tab3]", class = "disabled",
               condition = length(input$foo)==1)
      })})

【讨论】：

谢谢 A.Suliman，我也使用@Dean 示例找到了解决方案
@SNEHA 我可以看到。干得好还很好地使用了reactive 来触发observeEvent +10。

【解决方案2】：

library(shiny)
library(shinyjs)
jscode <- "
   shinyjs.disableTab = function(name) {
   var tab = $('.nav li a[data-value=' + name + ']');
   tab.bind('click.tab', function(e) {
 e.preventDefault();
return false;
  });
 tab.addClass('disabled');
}

 shinyjs.enableTab = function(name) {
 var tab = $('.nav li a[data-value=' + name + ']');
 tab.unbind('click.tab');
 tab.removeClass('disabled');
  }"

css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"
shinyApp(
    ui = fluidPage(
     useShinyjs(),
     extendShinyjs(text = jscode),
     inlineCSS(css),



selectizeInput("foo", "Show tab2",selected = NULL,choices=c("a","b","c","d"), multiple = TRUE),


     tabsetPanel(


  id = "navbar",
  tabPanel(title = "tab1",
           value = "tab1",
           h1("Tab 1")
  ),
  tabPanel(title = "tab2",
           value = "tab2",
           h1("Tab 2")
  ),
  tabPanel(title = "tab10",
           value = "ta10",
           h1("Tab 10")
  ),
  tabPanel(title = "tab99",
           value = "tab99",
           h1("Tab 99")
  ),
  tabPanel(title = "tab19",
           value = "tab19",
           h1("Tab 19")
  ),
  tabPanel(title = "tab09",
           value = "tab09",
           h1("Tab 09")
  ),
  tabPanel(title = "tab3",
           id="pqr",
           value = "tab3",
           h1("Tab 3")
  )
)


   ),
    server = function(input, output) {
      value <- reactive(input$foo)

observeEvent(value(), {
  if(length(value())==1){

    js$disableTab('tab3')
  }  


  if(length(value())>=2){
    js$enableTab('tab3')
  }

})

 }
)

【讨论】：