enable a button after I choose an item in a select.

enable a button after I choose an item in a select.

When the page loads, the #classeditbutton below is disabled. 

What I want to do, is make a choice in the select below, and as a result enable the #classeditbutton. I am confused about .active and .disabled .enabled. Functionally, I want the button to load so that it cannot be clicked until a choice is made in the select. Then when a choice is made, I want that button to be enabled so it works. 

I have tried a few things that have worked before but I am trying to use query this time. 

Thanks for the help. (By the way, disregard the terascript code. It is making the popup dynamically.)

Mark




 Here is the HTML

   <div class="col-xs-6" >
        <form >
  <select style="position:relative;horizontal-align:left;width:100%;border:1px solid Green;" class="form-control" id="sel1" name="classid" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="">Select Class</option>
<@rows>
<option value="<@appfile>?_function=newstudent&_FUNCTIONfour=yes&rowid=<@COLUMN 'phdtools_classperiods.classperiods_rowid'>" 
<@if "<@ARG rowid> = <@COLUMN 'phdtools_classperiods.classperiods_rowid'> ">selected </@if> >

<@COLUMN 'phdtools_classperiods.classperiods_name'></option>
</@rows>
 
  </select>
</form>
    </div>
    <!--  right button  -->
    
    
    
 <div class="col-xs-3" style="left:-15px;">
<a href="#" id="classeditbutton" class="btn btn-success disabled" 
   data-toggle="modal" 
   data-target="#editclassModal"><span class='glyphicon glyphicon-chevron-left'>-Edit</span></a>
    </div>   
    

Thank you for any insight you can offer. 

Mark