Bootstrap Tutorial - Disable form input elements








Disable form input elements

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--  w  ww.jav  a 2 s. c  o  m-->
<body style='margin: 20px;'>

  <form class="form-horizontal">
    <input class="form-control" id="disabledInput" type="text"
      placeholder="Disabled input here..." disabled>
  </form>

</body>
</html>

Click to view the demo





Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w  w . j a  v a 2 s.co m-->
<body style='margin:20px;'>

<form class="form-inline">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledInput">Disabled input</label>
      <input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledInput">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>
        
</body>
</html>

Click to view the demo