时间戳

首页 > 解决方案 > 禁用按钮第一次起作用，但按下一次后不起作用，我该如何解决？

jquery - 禁用按钮第一次起作用，但按下一次后不起作用，我该如何解决？

问题描述

HTML

$(document).ready(function() {
  $("#inputGroupSelect02").change(function() {
    var str = "";
    if ($("#inputGroupSelect02 option:selected").val() == '') {

      $('#button').attr('disabled', 'disabled');
    } else {

      $('#button').removeAttr('disabled');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose how many columns you need</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Columns</label>
  </div>
</div>
<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose how many rows you need</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect03">Rows</label>
  </div>

</div>
<button type="button" class="btn btn-success" onclick="createTable()" id="button" disabled="disabled"> Insert  </button>

该功能在开始时有效，在我选择该选项之前该按钮被禁用。但是，只要我按下 INSERT 并插入表格，在我刷新页面之前，该按钮就不会再变为禁用。我该如何解决这个问题？谢谢！

更新表做什么。

function createTable(){

 $('#myTable').empty();

 var rn = $('#inputGroupSelect03').val();

 var cn = $('#inputGroupSelect02').val();

 for(var r=0;r<parseInt(rn,10);r++){
 var x=document.getElementById('myTable').insertRow(r);
 for(var c=0;c<parseInt(cn,10);c++)  {

 var y=  x.insertCell(c);
 y.innerHTML="<img src='SOURCE IMG HERE' alt='hello'/>";
 $("#myTable tr td").rotatable({snap:true }); $("#myTable tr td ").draggable({

  appendTo: "#droppable",
  containment: ".chart-area",

  cancel:false,
  start: function(event, ui) {
    c.tr = this;
    c.helper = ui.helper;

  }
});

 jQuery('#inputGroupSelect03').get(0).selectedIndex = 0; 
 jQuery('#inputGroupSelect02').get(0).selectedIndex = 0; 


  }
 }
 }

自从有人问我以来，我已经用“表格代码及其作用”更新了这个问题。

标签： jquery

解决方案

  1. 如果你使用 jQuery，永远不要使用 onevent 属性：

    <按钮onclick='fnc()'>

    // Use this instead 
$('#button').on('click', function() {createTable()});

  2. 在第一次<option> 添加value=""到每个：

    <option selected value=''>Choose how many columns you need</option>
<option selected value=''>Choose how many rows you need</option>

  3. 使用以下控制语句，以便仅在两者<select>都具有 value*时才启用按钮：

    if ($("#inputGroupSelect02").val() === '' || $("#inputGroupSelect03").val() === '') {...

  4. jQuery 将 HTML 属性视为一个属性，一旦它被建立，所以使用这个：

    $('#button').prop('disabled', false);

    *也不要使用 selected<option>来获取目标值（例如） <select>$('select').val()

演示

$(document).ready(function() {

  $('#button').on('click', function(e) {
    var rows = Number($("#inputGroupSelect02").val());
    var cols = Number($("#inputGroupSelect03").val());

    createTable(rows, cols);
    $(".custom-select").val('');
    $('#button').attr('disabled', true);
  });

  $(".custom-select").on('change', function() {

    if ($("#inputGroupSelect02").val() === '' || $("#inputGroupSelect03").val() === '') {

      $('#button').attr('disabled', true);

    } else {

      $('#button').prop('disabled', false);
    }
  });
});

function createTable(rows, cols) {
  var T = $('.table')[0];
  var tB = T.tBodies[0];
  var rQTY = rows;
  var cQTY = cols;

  for (let r = 0; r < rQTY; r++) {
    var R = T.insertRow();
    for (let c = 0; c < cQTY; c++) {
      var C = R.insertCell();
      C.textContent = 'TD';
    }
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<main class='container'>
  <section class='row'>
    <form lass="form-inline col-sm-12">
      <fieldset class="form-group">
        <label class="input-group-text input-group col-sm-6" for="inputGroupSelect02">Rows</label>
        <select id="inputGroupSelect02" class="custom-select col-sm-6">
          <option selected value=''>Choose how many rows you need</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
        </select>
      </fieldset>

      <fieldset class="form-group">
        <label class="input-group-text input-group col-sm-6" for="inputGroupSelect03">Columns</label>
        <select id="inputGroupSelect03" class="custom-select col-sm-6">
          <option selected value=''>Choose how many columns you need</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
        </select>
      </fieldset>

      <button id="button" class="btn btn-success float-right" type="button" disabled>Insert</button>
    </form>
  </section>
  <hr>
  <section class='row'>
    <figure class='table-responsive'>
      <table class='table table-hover'>
        <tbody></tbody>
      </table>
    </figure>

  </section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读