Shiny应用技术疑问：使用原生JavaScript响应式禁用输入组件时，为何仅checkboxInput可生效？

Hey there, this is a super common gotcha with how Shiny structures its input components! Let me break down why your current code only works for checkboxInput and how to fix it for the other input types.

The Root Cause #

Shiny doesn’t map your inputId directly to the actual interactive form element for every input type. Here’s the breakdown:

• checkboxInput: The inputId is assigned directly to the <input type="checkbox"> element itself. That’s why setting disabled on this ID works perfectly—you’re targeting the right element.
• radioButtons: Your inputId is given to a parent <div> that wraps all the individual radio <input> elements. Disabling a div does nothing (divs aren’t interactive form controls), so you need to target the radio inputs inside that parent.
• checkboxGroupInput: Same as radio buttons: the inputId belongs to the parent div, not the individual checkboxes nested inside it.
• selectInput: By default, Shiny uses Selectize.js to style dropdowns, which hides the native <select> element. Even if you disabled the native select, the styled Selectize UI wouldn’t update—you need to interact with the Selectize instance directly.

Fixed JavaScript Code #

Here’s how to adjust your script to target the correct elements for each input type:

library(shiny)
ui = fluidPage(
  tags$script(
    HTML(
      "document.addEventListener('shiny:connected', function() {
        document.addEventListener('shiny:inputchanged', function(event) {
          const shouldDisable = event.name === 'control' && event.value === 'disable';
          
          // Handle radioButtons: Target all radio inputs inside the parent div
          const radioInputs = document.querySelectorAll('#radio input[type=\"radio\"]');
          radioInputs.forEach(input => input.disabled = shouldDisable);
          
          // Handle checkboxInput (works as-is, kept for consistency)
          document.getElementById('checkSingle').disabled = shouldDisable;
          
          // Handle checkboxGroupInput: Target all checkboxes inside the parent div
          const groupCheckboxes = document.querySelectorAll('#checkGroup input[type=\"checkbox\"]');
          groupCheckboxes.forEach(input => input.disabled = shouldDisable);
          
          // Handle selectInput: Update both native select and Selectize UI
          const selectElement = document.getElementById('choose');
          selectElement.disabled = shouldDisable;
          // If Selectize is active (default), update its state
          if (selectElement.selectize) {
            shouldDisable ? selectElement.selectize.disable() : selectElement.selectize.enable();
          }
        });
      });"
    )
  ),
  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){
}

shinyApp(ui, server)

Key Adjustments Explained #

• radioButtons & checkboxGroupInput: We use document.querySelectorAll() to grab all the actual input elements inside the parent div (the one with your inputId), then loop through them to set the disabled property.
• selectInput: We first disable the native <select> element, then check if Selectize is active (it is by default) and use its API to toggle the disabled state of the styled dropdown. If you ever set selectize=FALSE in selectInput, just the native select handling will suffice.

内容的提问来源于stack exchange，提问作者werN