bootstrap表单控件

禁用状态:

被禁用的 fieldset

<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can‘t check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

这是个整体案例

单个案例只需要添加disable就可以了

 <button type="submit" class="btn btn-default" disabled>Submit</button>

使用点击事件进行:

 <button type="submit" class="btn btn-default btnclick" >Submit</button>
  $(function () {

        //index()会返回当前元素在所有兄弟元素里面的索引。
        $(".btnclick").click(function () {
            $(".btnclick").attr("disabled",true);
        });

    });

这样,在前端,点击之后是不可以再次重复点击

给按钮添加点击事件的两种方式:

/*  $(function () {

        //index()会返回当前元素在所有兄弟元素里面的索引。
        $(".btnclick").click(function () {
            $(".btnclick").attr("disabled",true);
        });

    });*/
function clickbtn() {
      $(".btnclick").attr("disabled",true);

  }

给按钮添加一个clickbtn的方法,那么也是可以实现的

原文地址:https://www.cnblogs.com/xiufengchen/p/10437314.html

时间: 2024-08-28 05:23:49

bootstrap表单控件的相关文章

bootstrap -- 表单控件

若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; bor

Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

Bootstrap系列 -- 14. 表单控件输入框input

每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. <fo

Bootstrap关于表单控件(Radio,CheckBox)

表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题).使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可. <form role="form"> <div class="checkbox"> <labe

Bootstrap系列 -- 18. 表单控件大小

前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度.这两个类名是: 1. input-sm:让控件比正常大小更小 2. input-lg:让控件比正常大小更大 这两个类适用于表单中的input,textarea和select控件 <h1>案例1</h1> <form role="form"

Bootstrap_表单_表单控件

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”. <form role=&quo

vue2.0 之表单控件绑定

表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v-model="myVal"><br/> {{ myVal }}<br/> <input type="text" name="" v-model.lazy="myVal1"><br/&

基于Extjs的web表单设计器 第二节——表单控件设计

这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门. 一.区域控件,它主要包含三个类型的控件:卡片区域.表格区域.混合区域.这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel.它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支