闪亮：使用 Javascript 禁用各种输入？

Question

没有像 Shinyjs 这样的附加包，我想使用 Javascript（首选 vanilla JS）来响应地禁用我的 Shiny 应用程序中的各种输入。但是，除了 checkboxInput() 之外，无法禁用任何输入。有人对此有解释吗？

library(shiny)

ui = fluidPage(
  
  tags$script(
    HTML("
    $(document).on('shiny:connected', function(event) {
    
    $(document).on('shiny:inputchanged', function(event) {
    if(event.name === 'control' && event.value === 'disable'){
    
    
    document.getElementById('radio').disabled = true;
    
    document.getElementById('checkSingle').disabled = true;
    
    document.getElementById('checkGroup').disabled = true;
    
    document.getElementById('choose').disabled = true;
    
  }else{
    
    document.getElementById('radio').disabled = false;
    
    document.getElementById('checkSingle').disabled = false;
    
    document.getElementById('checkGroup').disabled = false;
    
    document.getElementById('choose').disabled = false;
   
   
  }
  });

});")),
  
  
  div(radioButtons(inputId = "control", label = "DISABLE INPUTS", choices = c("enable", "disable"))),
  div(style = "margin: 1.5rem 0; border-bottom: solid black .1rem; width: 15%;"),
  
  div(
    radioButtons(inputId = "radio", label = "RADIOBUTTON", choices = c("one", "two", "three"))),
  
  div(
    checkboxInput(inputId = "checkSingle", label = "CHECKBOX SINGLE")),
  
  div(
    checkboxGroupInput(inputId = "checkGroup", label = "CHECKBOX GROUP", choices = c("one", "two", "three"))),
  
  div(
    selectInput(inputId = "choose", label = "SELECTINPUT", choices = c("one", "two", "three"))))

server = function(input, output, session){
}

Answer 1

以下将起作用：

library(shiny)

ui = fluidPage(
    tags$script(HTML(
    "
    $(document).on('shiny:connected', function(event) {
        var els = $('.my-controls');
        var toadd = els.find('input, button, textarea, a[download]');
        els = $(els.toArray().concat(toadd.toArray()));
        var selects = els.find('select').selectize();
        $(document).on('shiny:inputchanged', function(event) {
            var disabled;
            if(event.name === 'control' && event.value === 'disable'){
                disabled = true;
                els.addClass('disabled');
                selects.map(function(n) {selects[n].selectize.disable()});
            }else{
                disabled = false;
                els.removeClass('disabled');
                selects.map(function(n) {selects[n].selectize.enable()});
            }
            els.attr('disabled', disabled);
            els.prop('disabled', disabled);
        });
    });
    "
    )),
    div(radioButtons(inputId = "control", label = "DISABLE INPUTS", choices = c("enable", "disable"))),
    div(style = "margin: 1.5rem 0; border-bottom: solid black .1rem; width: 15%;"),
    div(
        class ="my-controls",
        div(radioButtons(inputId = "radio", label = "RADIOBUTTON", choices = c("one", "two", "three"))),
        div(checkboxInput(inputId = "checkSingle", label = "CHECKBOX SINGLE")),
        div(checkboxGroupInput(inputId = "checkGroup", label = "CHECKBOX GROUP", choices = c("one", "two", "three"))),
        div(selectInput(inputId = "choose1", label = "SELECTINPUT", choices = c("one", "two", "three")))
    )
)
server = function(input, output, session){}
shinyApp(ui, server)

将所有输入添加到 div 和 my-controls class 中。 JS会自动全部找到。

代码修改自 shinyjs。

如果您确定这四种类型都是您将要使用的输入类型，那么这里就是您的答案。如果没有，Shinyjs 在许多特殊情况下做得非常好。我不明白你为什么不想使用它。我的代码没有涵盖所有的特殊情况。我不可能在 post 中列出所有情况。请参考 shinyjs 代码，看看他们涵盖了多少其他案例。

闪亮：使用 Javascript 禁用各种输入？

Shiny: Disable various inputs with Javascript?

javascript

r

shiny