Kiedy otworzę modal, chcę, aby przycisk był wyłączony po otwarciu modalności.

Ale to nie działa:

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

Wiem, że jeśli chcę go kliknąć, musiałbym zrobić coś takiego:

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

Ale nie jestem pewien, jak skierować do przycisku wewnątrz modalności po otwarciu.

 $( '.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);
            });
       })
0
user8463989 3 czerwiec 2018, 18:08

3 odpowiedzi

Najlepsza odpowiedź

Korzystanie z on('click'.. przycisk jest this wewnątrz obsługi zdarzeń

$( 'body' ).on('click', '#addToCartNF', function() {
     $(this).prop('disabled', true);
     // or native element approach
     this.disabled = true;
})
2
charlietfl 3 czerwiec 2018, 15:29

Możesz tego spróbować.

Zmień to

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

Z tym

$( '#addToCartNF' ).attr('disabled', 'disabled');
-1
Shree 4 czerwiec 2018, 04:32

Jeśli używasz modalności Bootstrap (co założy, że to zrobisz), proszę podać to (i dodaj odpowiedni znacznik)

Powinieneś użyć imprezy show.bs.modal.

$('#myModal').on('show.bs.modal', function (event) {
  // var button = $(event.relatedTarget); // you can check here what button originated the modal to show.
  $(this).find('#addToCartNF').prop('disabled', true);
});

Proszę odnieść się do Docs

Aktualizacja:

Nie można wyłączyć znacznika a, ale możesz nieostalizować atrybut href. A potem w celu wizualnego wyglądu można dodać kilka klas, aby pokazać użytkownikowi, którego nie może tego kliknąć.

Na przykład:

  $(this).find('#addToCartNF').attr('href', '').addClass('disabled');
-2
JonnieJS 3 czerwiec 2018, 15:21