setting anchor button in bootstrap from disabled to enabled.

setting anchor button in bootstrap from disabled to enabled.

I posted this before, but as my wife says all too often, I don't think what I said was that clear. 

What I want to do is simple. I have a popup on a page. And an edit button in bootstrap, made out of an anchor, on the right of the select. Clicking the edit button is meant to open a dialog and edit the item that has been selected in the popup. 

When the page opens, no selection has been made in the select. In that case, I don't want the edit button to be enabled because a selection hasn't been made to edit on. So I want the page to open and have that edit button disabled. Then if someone makes a selection in the popup, now I want to enable the edit button. Here is the page code, I am using bootstrap. 


<div class="row" style="padding:0 0;">

<!--  left button  -->
    <div class="col-xs-3" style="margin:0;padding:0 0;">
    <a href="#" style="float:right;" class="btn btn-success" 
   data-toggle="modal" 
   data-target="#classModal">New-<span class='glyphicon glyphicon-chevron-right' ></span></a>
    </div>
    
    
    
    
  
  <!-- class popup   -->
    <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> >
<@comment></@comment>
<@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>   
    
Here is the use of Jquery that doesn't work:

<script>
$(function() {
    
     $('#sel1').change(function() {
     
     $("#classeditbutton").toggleClass('disabled');
      
    });
});
</script>

I've also tried prop. I think it was like this: 

    $("#classeditbutton").prop('disabled', false); This doesn't work either. 



-
You will notice in the code directly above that the anchor button #classeditbutton is set to disabled. But I am not sure that this is even the right way either. Do you have any ideas about how to make this happen? Specifically, how to make a selection from a select and then as a result of the selection make a button clickable (enabled)?

Thanks for your help.