当用户名被占用时，禁用按钮jquery

I would like to be able to have my form disabled from submitting when username is taken, and I would like to get some help with that.

my js code is:

$('#username').keyup(function() {
var username = $(this).val();

$('#username_status').html('Searching...');

if (username !='') {
    $.post('username_check.php', { username: username}, function(data) {
        $('#username_status').html(data);
    });
} else{
    $('#username_status').html('');
}
});

and my for checking username exists or not:

<?php
if(isset($_POST["username"]))
{
define("HOST","localhost");
define("USERNAME","root");
define("PASS","");
define("DBNAME","testingproject");

$connecDB = mysqli_connect(HOST, USERNAME, PASS, DBNAME)or die('could not connect to database');


$username =  $_POST["username"];


$results = mysqli_query($connecDB,"SELECT id FROM attendant WHERE username='$username'");

$username_exist = mysqli_num_rows($results); //records count


if($username_exist) {
  $output= "Sorry, this Username is taken";
  echo ($output);
}else{
  echo('available');
 }
}
?>

on php page

if($username_exist) { echo 'yes'; }
else { echo 'no'; }

on js,

$.post('username_check.php', { username: username}, function(data) {
    if (data == 'yes') {
      // here disable the registration button
    } else {
      // active the registration button
    }
});

hope it help!

also you can check this thread: JQuery/Ajax Post returned data and IF function