Bootstrap Tutorial - Bootstrap Form Disable Readonly

Disable Form Controls

If you have used the disabled attribute to disable an input element, Bootstrap has a style defined for it. For example, this code:

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from   w w  w  . j av a 2  s.  co  m-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <input class="form-control" 
           type="text" 
           placeholder="Disabled input  here..." disabled>
  </body>
</html>

Click to view the demo

Disabled Fieldsets

Rather than disabling the form controls individually, we can disable all form controls within a fieldset by adding the disabled attribute to the <fieldset> element.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{<!-- ww  w.  j  a  va 2s .c o  m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form class="form-horizontal">
        <fieldset disabled="disabled">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-2">Email</label>
                <div class="col-xs-10">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>

Click to view the demo

Read only

add the readonly attribute on input elements to create read only input controls that prevent user inputs.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{<!--from w  ww.  ja  v a  2  s .  c  o m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
      <input type="text" class="form-control" placeholder="Readonly input" readonly="readonly">
    </form>
</div>
</body>
</html>

Click to view the demo