is() method:
It is used to filter html elements by checking with selectorElement. It returns true if there is minimum one match from the given selectorElement or some other argument provided.
Syntax:
$(selector).is(selectorElement,function(index,element))
- selectorElement parameter is required and it contains that expression with which to filter.
- It is optional parameter and it specifies a function to execute for group of selected elements.
Example:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.content{border:1px solid #333;padding:35px 12px;width:500px;margin-bottom:10px;background:#5AB0A6;margin: 0 auto;}
.addlnk{text-indent:40px;}
</style>
</head>
<body>
<div class="content">
<h1 class="redeem-head">Redeem Portfolio</h1>
<p class="subhead">check the checkbox to enable ok button</p>
<p class="msg"><input type="checkbox" id="checkbox" name="prog"> <span>Please check the checkbox to redeem your account</span></p>
<p><input type="button" value="OK" name="okbtn" id="okbtn" class="r-btn" disabled>
<input type="button" value="Cancel" name="cancelbtn" id="cancelbtn" class="r-btn"></p>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked') ) {
document.getElementById("okbtn").disabled = false;
$('#okbtn').css('background-color','#f05a50');
// $('#okbtn').hover.css('background-color','#f16a61');
}
else {
document.getElementById("okbtn").disabled = true;
$('#okbtn').css('background-color','#d8d8d8');
}
});
});
</script>
</body>
</html>
In the above example we have disabled ok button until the user will not check the checkbox and we are using is() method to check whether the checkbox is checked or not. When the user will check the checkbox ok button will get enabled.
You can check the output of above example here: https://jsfiddle.net/3mtwv2xe/
0 Comment(s)