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

Posted 2023-03-24

【中文标题】启用带有多个输入的选项卡并使用一个输入禁用选项卡

【英文标题】：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]")
     )

【参考方案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')
  

)

 
)