如果值无效，请坚持如何禁用此按钮

问题描述：

I am trying to disable a button if input is not valid. I tried to use PHP but I think its not the right approach. Any suggestions guys? The code is here below:

<form action="" method="" enctype="multipart/form-data" data-toggle="validator">
    <div class="modal fade" id="qtyModal" tabindex="-1" role="dialog" aria-labelledby="qtyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="qtyModal">Quantity</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
     <div class="modal-body">
         <div class="container-fluid">
            <div class="form-group col-md-6">
                <label for="quantity<?=$i;?>">Quantity:</label>
                <input type="number" name="quanitity" id="quantity" value="<?= $quantity ;?>" min="0" class="form-control" data-minlength="1"  pattern="([0-9]|[1-8][0-9]|9[0-9]|100)" data-error="Please enter a Positive Number between 0 - 100!!!">
                <div class="help-block with-errors"></div>
            </div>
         </div>
    </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <?php if(($quantity == '') || ($quantity >= 0 )) :?>
         <button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
         <?php endif;?>
     </div>
            </div>
        </div>
    </div>
</form>

This button (shown below) I am trying to disable (taken from the code above):

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <?php if(($quantity == '') || ($quantity >= 0 )) :?>
     <button type="button" class="btn btn-primary" onclick="updateQtyFunction();jQuery('#qtyModal').modal('toggle');return false;">Save changes</button>
     <?php endif;?>
 </div>

Below also find the jQuery Function:

function updateQtyFunction(){
    var qtyNumber='';
    if(jQuery('#quantity')!=''){
        qtyNumber = jQuery('#quantity').val();
    }
    jQuery('#qtyPreview').val(qtyNumber);
}

答

This is very easy to do with Javascript and you don't really need jQuery for it. Just give the button you want to disable an id and in your function set the disabled attribute of the button to true.

<!DOCTYPE html>
<html lang="nl">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
         <div class="modal-footer">

            <!-- Add an id to the button -->
            <button type="button" id="button_1" class="btn btn-secondary" data-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary" onclick="updateQtyFunction();">Save changes</button>
         </div>
        <script>
        function updateQtyFunction()
        {
            var qtyNumber='';

            if (jQuery('#quantity') != '')
            {
                qtyNumber = jQuery('#quantity').val();
                $('#button_1').attr('disabled', 'true'); // Disable the button (jQuery)
                document.getElementById('button_1').disabled = 'true'; // Disable with Javascript
            }
            jQuery('#qtyPreview').val(qtyNumber);
        }
        </script>
    </body>
</html>

</div>

答

For PHP, something like this could work:

if(isset($_POST['button']))
    echo '<button type="button" name="button" />';

If the form action is "post" and an input tag with name of "button" has a value. Then this button will show up and not if otherwise.

答

If you need to disable the button based on a condition that can change without reloading the page, and you are using bootstrap (which it seems you are) you can add the class .disabled to the button with jQuery. Then you can remove it to enable it when the condition is met.

On another side if the page requires to be reloaded for the button to be enabled, instead of adding / removing the class with jQuery, you can do it in PHP.

如果值无效，请坚持如何禁用此按钮

相关推荐