表单禁用元素

17 Mar 2025 | 阅读 2 分钟

有两种方法可以禁用表单元素。

disabled class: disabled 类可以应用于 HTML 的任何元素。

disabled 属性: disabled 属性只能应用于表单元素，如 input、textarea 和 select。

注意：禁用的元素具有较低的不透明度，并且不会接收任何触摸/点击事件。

示例

让我们看一个例子来演示 disabled 类和 disabled 属性。

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Checkboxes group</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Disabled elements</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Field 1</div>
                              </div>
                           </li>
                           
                           <!-- This element will be disabled -->
                           <li class = "item-content disabled">
                              <div class = "item-inner">
                                 <div class = "item-title">Field 2 with <strong>disabled</strong> class applied</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Field 3</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title label">This is input text</div>
                                 <div class = "item-input">
                                    <!-- Disabled input -->
                                    <input type = "text" name = "name" placeholder = "Enter your name">
                                 </div>
                              </div>
                           </li>
                           
                           <!-- Element with disabled input -->
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title label">This is <strong>disabled</strong> input text</div>
                                 <div class = "item-input">
                                    <!-- Disabled input -->
                                    <input type = "text" name = "name" placeholder = "Enter your name" disabled>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

立即测试

下一个主题Framework7 表单数据

← 上一个下一个 →

表单禁用元素

注意：禁用的元素具有较低的不透明度，并且不会接收任何触摸/点击事件。

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

表单禁用元素

注意：禁用的元素具有较低的不透明度，并且不会接收任何触摸/点击事件。

示例

相关帖子

F7 标签 & 输入

F7 表单元素

F7 表单存储

F7 插入

F7 完整布局表单

F7 图标输入

F7 仅输入

F7 表单数据

F7 复选框 & 单选框

F7 智能选择

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器