如何在使用jQuery打开模式时以元素为目标

当我打开模式时，我希望在打开模式时禁用按钮

但是，这不起作用：

$( '#addToCartNF' ).prop('disabled', true);

我知道，如果我想点击它，我必须做如下事情：

$( 'body' ).on('click', '#addToCartNF', function() {

但我不知道如何在打开按钮时将其锁定在模式内

 $( '.outlet' ).on('click', function(e) {
           e.preventDefault();
           var prodName = $(this).data('prodname');
           var prodId = $(this).data('id');

           $.ajax({
               url: url + '/CartAjax/ajaxModal',
               type: 'POST',
               data: {prodId: prodId},
               beforeSend: function() {
               $( '.outlet' ).prop('disabled', true);
               $( '.obtext' ).hide();
               $( '#outletspinner' ).show();

           },
           })
           .done(function (data) {
                 var modal = `

                    <div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">${prodName} </h4>
                                </div>
                                <div class="modal-body">

                                <div>
                                    <select class="form-control" id="branches">
                                        <option value="">Select Outlet</option>
                                        ${data}
                                    </select>
                                </div>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default closeBranchModal">Close</button>
                                  <button class="btn btn-raised ripple-effect cart-btn closeBranchModal" id="addToCartNF" data-id="${prodId}"><div class="spinner" style="display: none;"></div><span class="cartBtnTextNF">ADD TO CART</span></button>
                                </div>
                            </div>
                        </div>
                    </div>  
                    `;

                $(modal).modal(); 
                $( '#outletspinner' ).hide();
                $( '.obtext' ).show();
                $( '.outlet' ).prop('disabled', false);
           })

                .fail(function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus + ': ' + errorThrown);
                console.warn(jqXHR.responseText);
            });
       })

---

如果您使用引导模式（我假设您使用），请说明这一点并添加适当的标记

您应该使用show.bs.modal事件

请参阅

更新： 您不能禁用a标记，但可以取消设置href属性。 然后对于视觉外观，您可以添加一些类来向用户显示他不能单击此项

例如：

  $(this).find('#addToCartNF').attr('href', '').addClass('disabled');

你可以试试这个

改变这个

$( '#addToCartNF' ).prop('disabled', true);

用这个

$( '#addToCartNF' ).attr('disabled', 'disabled');

使用你的“点击”。。按钮位于事件处理程序的内部

$( 'body' ).on('click', '#addToCartNF', function() {
     $(this).prop('disabled', true);
     // or native element approach
     this.disabled = true;
})

---

模式html和按钮在哪里？提供一个好的，现在就发布代码。模态实际上位于一个变量中，通过单击使用此代码的按钮打开：$modal.modal；好吧，我想问题更多的是按钮。它是一个or。无法禁用但可以添加禁用的classIt是更改元素属性的首选方法，而disabled是某些元素的有效属性使用查找ID是多余的，因为ID是唯一的。但是如果有多个具有相同HTML的弹出窗口，情况可能就不是这样了。这怎么可能呢？ID只应存在于页面中一次，否则需要正确使用ClasseSetly。一个ID只能在页面中存在一次。依赖开发人员遵循以下标准是危险的。这不起作用，因为addToCartNF仅在模式打开时可用。是的，因为您正在使用事件删除我刚刚更新了主要问题，以显示成功ajax请求后设置和显示的模式变量。默认情况下，当模式打开时，该按钮应被禁用。请参阅“不确定为什么隐藏不显示”。如果id仍然相同并且在页面中没有重复，则没有理由不这样做

$( 'body' ).on('click', '#addToCartNF', function() {
     $(this).prop('disabled', true);
     // or native element approach
     this.disabled = true;
})