Please refer this code.
HTML
Name:
<asp:TextBox ID="txtName" runat="server" />
<br />
City:
<asp:DropDownList ID="ddlCities" runat="server">
<asp:ListItem Text="Select City" Value="0" />
<asp:ListItem Text="Mumbai" Value="1" />
<asp:ListItem Text="Delhi" Value="2" />
</asp:DropDownList>
<br />
<asp:Button ID="btnSave" Text="Save" runat="server" />
JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
validate()
$('[id*=txtName], [id*=ddlCities]').change(validate);
});
function validate() {
if ($('[id*=txtName]').val().length == 0 || $('[id*=ddlCities]').val() == 0) {
$("#btnSave").attr('disabled', 'disabled');
}
else {
$("[id*=btnSave]").removeAttr('disabled');
$("[id*=btnSave]").addClass('enabledButton');
}
}
</script>
Sample with Demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.enabledButton
{
color: Green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
validate()
$('#txtName, #ddlCities').change(validate);
});
function validate() {
if ($('#txtName').val().length == 0 || $('#ddlCities').val() == 0) {
$("#btnSave").attr('disabled', 'disabled');
}
else {
$("#btnSave").removeAttr('disabled');
$("#btnSave").addClass('enabledButton');
}
}
</script>
</head>
<body>
<div>
Name:
<input name="txtName" type="text" id="txtName" />
<br />
City:
<select name="ddlCities" id="ddlCities">
<option value="0">Select City</option>
<option value="1">Mumbai</option>
<option value="2">Delhi</option>
</select>
<br />
<input type="submit" name="btnSave" value="Save" id="btnSave" />
</div>
</body>
</html>
Demo
