Disable submit if the username is not available php

I am trying to develop a form to create a category.
<br>I have written a code to check the availability of the Category Name while user is typing the category name.
<br>This is the html code I have used in the form.

<div class="form-group">
 <label>Category Name<span class="text-danger">*</span></label>
 <input type="text" name="category_name" class="form-control" id="category_name">
 <div id="cat_name_status" class="mt-1"></div>
</div>

<button class="btn btn-primary" name="create" id="create" type="submit">Create</button>

What i need is, if the Category name is not available (already taken) the submit button should be disable.
<br>This is the jquery script I am using.

<script>
    $(document).ready(function(){
    
       $("#category_name").keyup(function(){
    
          var cat_name = $(this).val();
          var usernameRegex = /^[a-zA-Z0-9]+$/;
    
          if(cat_name != ''){
    
             $.ajax({
                url: 'cat_name_status.php',
                type: 'post',
                data: {cat_name: cat_name},
                success: function(response){               
                    $('#cat_name_status').html(response);                    
                 }
             });
          }else{
             $("#cat_name_status").html("<span style='color: red;'> <i class='fas fa-times-circle'></i> Enter a valid category name</span>");
             $("#create").attr("disabled", true);
          }
    
        });
    
     });
    </script>

and this is the php code in cat_name_status.php

<?php
     require('../../dbc/dbconn.php');
     include('../../includes/scripts.php');
     include('../../includes/functions.php');
     if(isset($_POST['cat_name'])){
        $cat_name = clearInput($condb, $_POST['cat_name']);
        $check = mysqli_query($condb, "
          select cat_name 
          from pos_categories 
          where cat_name = '$cat_name'");
        if(mysqli_num_rows($check)>0){
            echo '<p class="text-danger"><strong><i class="fas fa-times-circle"></i> Category Name already exists</strong></p>';
        }
    }
?>

At this moment, this code successfully prints the availability of the category name in cat_name_status div but need your support to modify it to disable the submit button if the category name is not available.

At this moment, this code successfully prints the availability of the category name in cat_name_status div but need your support to modify it to disable the submit button if the category name is not available.

rather than printing the error message as a string, you could use an object and encode it to JSON format to better communicate with client:

if (mysqli_num_rows($check) > 0) {
        $response = (object)[
            'code' => 1,
            'message' => '<p class="text-danger"><strong><i class="fas fa-times-circle"></i> Category Name already exists</strong></p>'
        ];
        echo json_encode($response);
    }

then you can parse the JSON and take action based on the "code" property of the returned object:

success: function(response){             
            var result = $.parseJSON(response);
            if(result.code == "1"){
                $('#cat_name_status').html(result.message);      
                $("#create").prop("disabled", true);              
            }
}

Why printing an object in JSON format makes the client-server communication better: because it provides a clean and flexible way to receive multiple data type structures in an AJAX call. In your specific case, you required two pieces of information from the server: an integer code indicating the scenario that occurred, and a string message containing the corresponding error message to be displayed to the user. By using JSON, you can easily receive both pieces of data in a clear and organized format that can be efficiently processed by the client-side code.