Javascript 根据具体输入值启用禁用按钮

问候。我目前正在开发一个JavaMVC项目。我想根据输入字段中的特定值禁用我的按钮。状态有两个主要状态，即“待定”和“已支付”。我的问题是如何禁用具有“付费”值的按钮

发票ID
供应商ID
项目ID
项目名称
量
单价
日期
总金额
地位
取消
函数disBut（）{
var btn=document.getElementById（“取消”）；
var status=document.getElementById（“status”）.value；
如果（状态==“待定”）{
btn.disabled=false；
}否则{
//当文本框为空时禁用文本框。
btn.disabled=true；
}
};

<form action = "deleteInvoice" method = "POST">
    <table>
    
    <tr>
    <td>Invoice ID </td>
    <td>Supplier ID </td>
    <td>Item ID </td>
    <td>Item Name </td>
    <td>Quantity </td>
    <td>Unit Price </td>
    <td>Date </td>
    <td>Total Amount </td>
    <td>Status </td>
    
    
    </tr>
    
    <c:forEach var="inv" items ="${invDetails}">
    
    <c:set var="invoiceID" value="${inv.invoiceID}"/>
    <c:set var="sID" value="${inv.sID}"/>
    <c:set var="itemID" value="${inv.itemID}"/>
    <c:set var="itemName" value="${inv.itemName}"/>
    <c:set var="qty" value="${inv.qty}"/>
    <c:set var="unitPrice" value="${inv.unitPrice}"/>
    <c:set var="date" value="${inv.date}"/>
    <c:set var="totPrice" value="${inv.totPrice}"/>
    <c:set var="status" value="${inv.status}"/>
    
    <tr>
    <td><input type ="text" name = "invoiceID" value = "${invoiceID}" readonly></td>
    <td><input type ="text" name = "sID" value = "${sID}" readonly></td>
    <td><input type ="text" name = "itemID" value = "${itemID}" readonly></td>
    <td><input type ="text" name = "itemName" value = "${itemName}" readonly></td>
    <td><input type ="text" name = "qty" value = "${qty}" readonly></td>
    <td><input type ="text" name = "unitPrice" value = "${unitPrice}" readonly></td>
    <td><input type ="text" name = "date" value = "${date}" readonly></td>
    <td><input type ="text" name = "totPrice" value = "${totPrice}" readonly></td>
    <td><input type ="text" name = "status" id="status" value = "${status}" readonly onkeyup="disBut()"></td>
    <td><button type="submit" id = "cancel" name="cancel" value="${status}"  onclick = "disBut()" disabled="disabled">Cancel</button></td>
    </tr>
    
    </c:forEach>
    </table>
    </form>
    
    
    <script type="text/javascript">
        function disBut() {
        var btn = document.getElementById("cancel");
        var status = document.getElementById("status").value;
        if (status == 'Pending') {
            btn.disabled = false;
        } else {
            //Disable the TextBox when TextBox is empty.
            btn.disabled = true;
        }
    };
    </script>