Question

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; 


  }
 }
 }

自从被问到以来，我已经用“表代码及其作用”更新了问题。

Answer 1

如果您使用的是jQuery，则永远不要使用onevent属性：

在第一个<option>上分别添加value=""：

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

使用以下控制语句，以便仅在两个<select>都具有值* 时启用按钮：

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

一旦建立，jQuery便将HTML属性视为属性，因此可以使用此属性：
```
$('#button').prop('disabled', false);
```
^{*也不要使用所选的<option>} ^{来获取值目标} ^{<select>（例如{{1 }}）}

演示

$('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';
    }
  }
}

Answer 2

单击按钮时，按钮已启用。要禁用它，输入的值需要变为空白。

要解决此问题，只需为按钮添加.click事件处理程序，以便在单击按钮时将其禁用。

注意：您还可以将.click中的所有内容添加到createTable函数中。

$(document).ready(function() {
  $("#inputGroupSelect02").change(function() {
    var str = "";
    if ($("#inputGroupSelect02 option:selected").val() == '') {
      $('#button').attr('disabled', 'disabled');
    } else {
      $('#button').removeAttr('disabled');
    }
  });
  
  $('#button').click(function() {
    $('#button').attr('disabled', 'disabled');
  });
});

function createTable() {
  
}

<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>

Answer 3

我对您的html代码做了如下更改：

 <select class="custom-select" id="inputGroupSelect02">
    <option value='' 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>

我在第一个选项上添加了一个值，以使JS代码起作用：

  $("#inputGroupSelect02, #inputGroupSelect03").change(function() {
    var str = "";
    if ($(this).find('option:selected').val() == '') {
      $('#button').prop('disabled', true);
    } else {
      $('#button').prop('disabled', false);
    }
  });

您也可以使用prop('disabled', true)

See this fiddle

Answer 4

这仅仅是更好地处理事件的问题。建议您在建立表格后将val重置为”，然后再次禁用该按钮。

 function buildTable(){
    //build table do your thing...
    $('#button').attr('disabled', 'disabled');
    $("#inputGroupSelect02 option:selected").removeAttr("selected");
}

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

4 个答案:

演示