<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <br/> <div class="card disabledbutton" id="teste"> <div class="card-header"> </div> <div class="card-body"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> </div> <div class="card-footer"> </div> </div> <div class="panel panel-default"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-6"> <fieldset> <legend> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </legend> <div class="panel panel-default"> <div class="panel-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </fieldset> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-6 mt-xs-2"> <fieldset> <legend> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </legend> <div class="panel panel-default"> <div class="panel-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </fieldset> </div> </div> </div> </div>

fieldset { border: 1px solid #ddd !important; margin: 0; xmin-width: 0; padding: 10px; position: relative; border-radius:4px; background-color:#f5f5f5; padding-left:10px!important; width: 100%; } legend { font-size:14px; font-weight:bold; border: none; width: 30%; margin-left: 20px; } @media (max-width: 575px) { .p-xs-0 { padding: 0!important; } .m-xs-0 { margin: 0!important; } .p-xs-1 { padding: .25rem!important; } .m-xs-1 { margin: .25rem!important; } .p-xs-2 { padding: .5rem!important; } .m-xs-2 { margin: .5rem!important; } .p-xs-3 { padding: 1rem!important; } .m-xs-3 { margin: 1rem!important; } .p-xs-4 { padding: 1.5rem!important; } .m-xs-4 { margin: 1.5rem!important; } .p-xs-5 { padding: 3rem!important; } .m-xs-6 { margin: 3rem!important; } .mb-xs-0 { margin-bottom: 0!important; } .mb-xs-1 { margin-bottom: .25!important; } .mb-xs-2 { margin-bottom: .5rem!important; } .mb-xs-3 { margin-bottom: 1rem!important; } .mb-xs-4 { margin-bottom: 1.5rem!important; } .mb-xs-5 { margin-bottom: 3rem!important; } .ml-xs-0 { margin-left: 0!important; } .ml-xs-1 { margin-left: .25!important; } .ml-xs-2 { margin-left: .5rem!important; } .ml-xs-3 { margin-left: 1rem!important; } .ml-xs-4 { margin-left: 1.5rem!important; } .ml-xs-5 { margin-left: 3rem!important; } .mr-xs-0 { margin-right: 0!important; } .mr-xs-1 { margin-right: .25!important; } .mr-xs-2 { margin-right: .5rem!important; } .mr-xs-3 { margin-right: 1rem!important; } .mr-xs-4 { margin-right: 1.5rem!important; } .mr-xs-5 { margin-right: 3rem!important; } .mt-xs-0 { margin-top: 0!important; } .mt-xs-1 { margin-top: .25!important; } .mt-xs-2 { margin-top: .5rem!important; } .mt-xs-3 { margin-top: 1rem!important; } .mt-xs-4 { margin-top: 1.5rem!important; } .mt-xs-5 { margin-top: 3rem!important; } .pb-xs-0 { padding-bottom: 0!important; } .pb-xs-1 { padding-bottom: .25!important; } .pb-xs-2 { padding-bottom: .5rem!important; } .pb-xs-3 { padding-bottom: 1rem!important; } .pb-xs-4 { padding-bottom: 1.5rem!important; } .pb-xs-5 { padding-bottom: 3rem!important; } .pl-xs-0 { padding-left: 0!important; } .pl-xs-1 { padding-left: .25!important; } .pl-xs-2 { padding-left: .5rem!important; } .pl-xs-3 { padding-left: 1rem!important; } .pl-xs-4 { padding-left: 1.5rem!important; } .pl-xs-5 { padding-left: 3rem!important; } .pr-xs-0 { padding-right: 0!important; } .pr-xs-1 { padding-right: .25!important; } .pr-xs-2 { padding-right: .5rem!important; } .pr-xs-3 { padding-right: 1rem!important; } .pr-xs-4 { padding-right: 1.5rem!important; } .pr-xs-5 { padding-right: 3rem!important; } .pt-xs-0 { padding-top: 0!important; } .pt-xs-1 { padding-top: .25!important; } .pt-xs-2 { padding-top: .5rem!important; } .pt-xs-3 { padding-top: 1rem!important; } .pt-xs-4 { padding-top: 1.5rem!important; } .pt-xs-5 { padding-top: 3rem!important; } .display-xs-1 { font-size: 6rem; font-weight: 300; line-height: 1.1; } .display-xs-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.1; } .display-xs-3 { font-size: 5rem; font-weight: 300; line-height: 1.1; } .display-xs-4 { font-size: 4.5rem; font-weight: 300; line-height: 1.1; } .display-xs-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.1; } .display-xs-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.1; } } .disabledbutton { pointer-events: none; opacity: 0.4; }

$('#teste').toggleClass('disabledbutton');