disable enable button state

by Thomas Cooper

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!--<button id="button_start" onclick="controls(this.id)">Play</button>    
<button id="button_stop" onclick="controls(this.id)" disabled="disabled">Stop</button>-->
<button id="button_start">Start</button>    
<button id="button_stop" disabled="disabled">Stop</button>

CSS

button{
    width:50px;
    height:30px;
    border-radius:4px;
    color:white;
    cursor:pointer;
}
#button_stop{
    background-color: blue;
    color:white;
}
#button_stop:disabled{background:blue;opacity:0.3;}

#button_start{
    background-color:blue;
    border: 0px;
}

JavaScript

//NOT WORKING jQuery
function controls(id) {
    if (id === "#button_start") {
        $('#button_start').prop('disabled', false);
        $('#button_stop').removeProp('disabled');
        
         // testing event
    $('#button_start').on('click',function() {
        $(this).prop('disabled', false);
    });
    $('#button_stop').on('click', function(){
        $(this).removeProp('disabled');
    });
        
        // You can define your play statements here
        //console.log(id);
        
    } else {
        $('#button_stop').prop('disabled', true);
        $('#button_start').removeProp('disabled');
        
         // testing
    			$('#button_stop').click(function() {
        		$(this).prop('disabled', true);
    		});
    			$('#button_start').click(function(){
            $(this).removeProp('disabled');
    		});

        // You can define your stop statements here
        //console.log(id);
    }
}

/*WORKS as expected javascript
function controls(id) {
    if (id === "button_start") {
        document.getElementById('button_start').setAttribute('disabled','disabled');
        document.getElementById('button_stop').removeAttribute('disabled','disabled');
        
        // You can define your play statements here
        console.log(id);
        
    } else {
        document.getElementById('button_stop').setAttribute('disabled','disabled');
        document.getElementById('button_start').removeAttribute('disabled','disabled');

        // You can define your stop statements here
        console.log(id);
    }
}
*/