douwanc63652 2017-10-08 14:38
浏览 26
已采纳

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

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);
}
  • 写回答

3条回答 默认 最新

  • duanrui3480 2017-10-08 14:59
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 求螺旋焊缝的图像处理
  • ¥15 blast算法（相关搜索：数据库）
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛？
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面
  • ¥15 itunes恢复数据最后一步发生错误
  • ¥15 关于#windows#的问题：2024年5月15日的win11更新后资源管理器没有地址栏了顶部的地址栏和文件搜索都消失了