<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="port" class="form-group"> <label for="interface">Interface:</label> <select id="interface" name="interface" class="form-control" required="" style="border-color: red;"> <option value="">Select Interface</option> </select> </div> <p><a href="https://www.w3schools.com" id="w3s" name="">W3Schools.com</a></p> <button id="test">Change href Value</button> <p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p> <button id="reset">Reset</button> <div id="result"></div>

$(document).ready(function(){ $("#result").html($("#interface").prop('required')) $("#test").click(function() { $("select").prop('required',false); $("#result").html($("#interface").prop('required')) }); $("#test").click(function(){ $("#w3s").attr("name", "bla"); }); $("#reset").click(function() { $("select").prop('required',true); $("#result").html($("#interface").prop('required')) }); });