Как я могу связать функцию щелчка в отключенной кнопке, используя jquery?

Question

У меня есть кнопка, которая по умолчанию отключена. Я хочу показывать предупреждающее сообщение при нажатии кнопки, чтобы информировать пользователя о необходимости выполнить какое-либо действие для включения кнопки.

<button type="button" class=" btn btn-success addRow disabled">Add More
                                        </button>

$('.addRow').click(function (e) {
        if ($('.disabled').hasClass('disabled')) {
            e.preventDefault();
            alert('Please select.....');
        }
    });

Answer 1

Свяжите свою функцию щелчка в состоянии готовности.

$(document).ready(function(){    
    $('.addRow').click(function (e) {
        if ($(this).hasClass('disabled')) {
            e.preventDefault();
            alert('Please select.....');
           // Then, after completion of your action, you can remove the disabled class from the below statement
           $(this).removeClass('disabled');
        }
    })
});

, тогда вы сможете связать событие щелчка.

Answer 2

Обновлено: Проверить tbody показать или скрыть от :visible метод как invoice type выбран или нет, а внутри tbody также проверить, выбран или нет, затем addRow кнопка включения и отключения как условно, поэтому проверьте ниже фрагмент.

/*Select Invoice Type*/
$(document).on('change','#invoiceType', function(){
  if($(this).val()!=''){
    $('#tbody').show();
  }
  else{
    $('#tbody').hide();
    $('.productname').val(''); // Reset value null
    $('#addRow').addClass('disabled'); //addRow button disabled
  }
});

/*Select Product Name*/
$(document).on('change','.productname', function(){
  if($(this).val()!=''){
    $('#addRow').removeClass('disabled');
  }
  else{
    $('#addRow').addClass('disabled');
  }
});

$(document).on('click', '#addRow', function(e){
  if ($('#tbody').is(':visible')) { //Check tbody is visible or not
    if($('.productname').val()!=''){
      // You can add your code here.. for next step which you need...
      $('#tbody').append('<tr><td>'+$('.productname').val()+'</td><td>-</td><td>-</td><td>-</td><td></td></tr>');
      $('.productname').val('') // Reset Product Name Dropdown.
      $('#addRow').addClass('disabled'); // After Product Name listed then addRod button disabled.
    }
    else{
     e.preventDefault();
     alert("Please Select Product Name!");
   }
 }
 else{
   e.preventDefault();
   alert("Please Select Invoice Type!");
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid my-3">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <select class="custom-select" name="type" id="invoiceType">
          <option value="" selected="selected">Select Invoice Type</option>
          <option value="Flat Discount">Flat Discount</option>
          <option value="Cash Discount">Cash Discount</option>
        </select>
       </div>
    </div>
    <div class="col-sm-12">
      <table class="table table-bordered" id="main_table">
        <thead class="bg-light">
          <tr>
            <th scope="col" class="align-middle">PRODUCT NAME</th>
            <th scope="col" class="align-middle">QTY</th>
            <th scope="col" class="align-middle">PRICE</th>
            <th scope="col" class="align-middle">AMOUNT</th>
            <th width="140" class="align-middle"><button type="button" id="addRow" class="btn btn-success disabled">Add More</button></th>
          </tr>
        </thead>
        <tbody id="tbody" style="display: none;">
          <tr>          	
            <td>
              <select name="product_id[]" class="form-control custom-select productname" id="row_0">
                <option value="">Select Product Name</option>
                <option value="Product Name #1">Product Name #1</option>
                <option value="Product Name #2">Product Name #2</option>
                <option value="Product Name #3">Product Name #3</option>
              </select>
            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>     
    </div>
  </div>
</div>

Вы можете remove / add класс по методу removeClass / addClass, так что проверьте ниже фрагмент.
Я надеюсь, что это поможет Вы много.

$(document).on('change','[data-addrow]', function(){
  if($(this).is(':checked')){
    $($(this).attr('data-addrow')).removeClass('disabled');
  }
  else{
    $($(this).attr('data-addrow')).addClass('disabled');
  }
});

$(document).on('click', '.addRow', function (e) {
  if ($('.disabled').hasClass('disabled')) {
    e.preventDefault();
    alert("Please tick checkbox for add more row!");
  }
  else{
    $('.table tbody').append('<tr><td>Raeesh</td><td>Alam</td></tr>')
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row justify-content-center">
    <div class="col-sm-8 col-md-6">
      <div class="form-group">
        <table class="table table-bordered my-3">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="2">
                <label>
                  <input type="checkbox" name="" data-addrow=".addRow"> Tick for add more row!
                </label>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <button type="button" class="btn btn-success addRow disabled">Add More</button>      
    </div>
  </div>
</div>

Answer 3

Вы уже выбрали отключенный элемент и вам не нужно проверять тот же класс. Вместо этого вы можете выполнить действие, как показано ниже:

$('.addRow').click(function (e) {
  $(this).toggleClass('disabled');
  // removes if it is disabled or adds if it's not
}

См. toggleClass

И если вы хотите сделать что-то еще, вы можете сделать точно так же, как вы сделали но вам просто нужно использовать $(this) вместо $('.disabled') селектора.

И если вы хотите выбрать другой элемент, у которого отключен класс, а не элемент, выбранный в данный момент, вы можете выбрать этот элемент, взяв другой класс, например у вас есть btn. Итак, вы будете использовать $('.btn').hassClass('disabled').