如何在禁用JS时阻止按钮访问？并实现锁定状态下隐藏Select框

Hey there, let's break down your two questions with practical, robust solutions that account for both enabled and disabled JavaScript scenarios—nice work thinking about these edge cases, they're super important for secure, reliable UIs!

When JavaScript is disabled, we can't rely on client-side scripts to block interactions, so we need to lean into native HTML and CSS features that work without JS:

• Use the native disabled attribute
  This is the most straightforward approach. Browsers natively respect the disabled attribute on buttons, preventing clicks and automatically applying a "disabled" visual state (like graying out the button). Even with JS off, this works out of the box.

  <button type="button" disabled>无法访问的按钮</button>
  

• Add CSS pointer-events: none + accessibility attributes
  If you need more control over styling (or if you're working with an element that doesn't support disabled natively), combine pointer-events: none to block mouse clicks with tabindex="-1" to prevent keyboard focus, and aria-disabled="true" for screen reader compatibility:

  <button type="button" style="pointer-events: none; opacity: 0.6;" tabindex="-1" aria-disabled="true">无法访问的按钮</button>
  

  Note: Pair this with the disabled attribute if possible, since it's the most semantically correct option.

• Hide the button entirely (if appropriate)
  If blocking access means the button shouldn't be visible at all, use the native hidden attribute or CSS display: none. This removes the button from the DOM flow entirely, so users can't interact with it even if they inspect elements:

  <button type="button" hidden>已隐藏的按钮</button>
  

Your existing JavaScript protections (blocking right-click, keystrokes for inspecting elements) are a good start, but they fail when JS is disabled. Here's how to add layered defenses that work in all scenarios:

1. Server-side rendering (most reliable) #

If the "locked" state is determined server-side, don't render the <select> element at all when the system is locked. This eliminates any possibility of users interacting with it, even if they mess with client-side code.

2. HTML + CSS fallback for JS-disabled scenarios #

If you need to toggle the locked state client-side, use a data attribute to control visibility, which works without JS:

• Add a data-locked attribute to a parent element (like <body> or a container) when locked
• Use CSS to hide the select when this attribute is present

  <!-- 锁定状态下，给body添加data-locked属性 -->
  <body data-locked="true">
    <select>
      <option>选项1</option>
      <option>选项2</option>
    </select>
  </body>
  
  <style>
    body[data-locked="true"] select {
      display: none;
    }
  </style>
  

  You can still use JavaScript to toggle the data-locked attribute when the state changes, but even if JS is off, the server can render the attribute correctly, and the select stays hidden.

3. Reinforce with additional CSS safeguards #

To make it harder for users to manually unhide the select via dev tools, add multiple CSS rules:

body[data-locked="true"] select {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

While determined users can still modify these styles, combining multiple rules makes it more tedious and less likely for casual users to bypass.

4. Keep your existing JS protections #

Your current JS code to block right-click and inspect element shortcuts is still useful for users with JS enabled. Just make sure it's fully implemented (here's the completed version):

$(document).ready(function () {
    // 阻止右键菜单
    $(document).bind("contextmenu", function (e) {
        e.preventDefault();
    });
    // 阻止F12、Ctrl+Shift+I等审查元素快捷键
    $(document).keydown(function(e) {
        if (e.keyCode === 123 || // F12
            (e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I
            (e.ctrlKey && e.shiftKey && e.keyCode === 74) || // Ctrl+Shift+J
            (e.ctrlKey && e.keyCode === 85)) { // Ctrl+U
            e.preventDefault();
        }
    });
});

Remember: No client-side protection is 100% foolproof, but combining server-side logic, native HTML/CSS features, and JS safeguards creates a strong layered defense.

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