javascript - 禁用按钮，直到填写表格(选择没有效果)

Question

我有以下表格:

<table>
                      <tr>
                        <td class="labelTD"><label for="manifestNumber">Manifest No.:</label><span class="requiredInput">*</span></td>
                        <td class="labelTD"><label for="date">Date Unloaded:</label><span class="requiredInput">*</span></td>
                        </tr>
                        <tr>
                          <td class="detailsTD"><input type="text" class="form-control form-required" placeholder="Manifest Number" name="manifestNumber" id="manifestNumber" required></td>
                        <td class="detailsTD"><input type="date" name="dateUnloaded" id="dateUnloaded" class="form-control form-required" required></td>
                      </tr>
                      <tr>
                        <td class="labelTD"><label for="originTerminal">Origin Terminal:</label><span class="requiredInput">*</span></td>
                        <td class="labelTD"><label for="carrierOrigin">Carrier Origin:</label><span class="requiredInput">*</span></td>
                          </tr>
                        <tr>
                         <td class="detailsTD">
                             <select class="form-control form-required terminalOrigin" required id="terminalOrigin" name="originTerminal">
                             <option></option>
                             <option value="CINC-Cincinatti">CINC-Cincinatti</option>
                             </select>
                        </td>
                        <td class="detailsTD">
                            <select class="form-control form-required carrierOrigin" required id="carrierOrigin" name="originCarrier">
                            <option></option>
                            @foreach($origins as $origin)
                                <option value="{{ $origin->id }}">{{ $origin->customer_name }}</option>
                            @endforeach
                            </select>
                        </td>
                      </tr>

                    </table>
<button id="createManifestButton" class="btn btn-primary" disabled>Create New Manifest</button>

我有这个脚本允许在四个字段都有值后使用该按钮:

<script>
(function() {
  $('.form-required').change(function() {

    var empty = false;
    $('.form-required').each(function() {
      if ($(this).val() === '') {
        empty = true;
      }
    });

    if (empty) {
      $('#createManifestButton').attr('disabled', 'disabled');
    } else {
      $('#createManifestButton').removeAttr('disabled');
    }
  });
})();
</script>

问题是，尽管脚本识别出选择项填充了具有值的选项，但我必须返回到文本或日期字段才能单击它。所以基本上说我填写了四个字段，该按钮仍然会被禁用，直到我返回文本或日期字段并更改某些内容(例如删除并重新添加字符)。

对于这两个选择，我使用 select2，它们的脚本就在这里:

<script>
$('.carrierOrigin').select2({
  placeholder: 'Select an option',
  allowClear:true,
    width:'245px'
});
    </script>
<script>
$('.terminalOrigin').select2({
  placeholder: 'Select an option',
  allowClear:true,
    width:'245px'
});
    </script>

如果没有填写所有四个字段，脚本将不允许按钮工作，所以我知道脚本部分工作，它似乎不想识别对选择所做的更改。

Answer 1

实际上，您的代码正在运行，但您应该将两个 select2(...) 调用包装在 $(document).ready()
select2 操作 DOM，在“准备好”之前执行此操作是不安全的。

https://select2.org/getting-started/basic-usage#single-select-boxes

$(document).ready(function() {
  $(".terminalOrigin").select2({
    placeholder: "Select an option",
    allowClear: true,
    width: "245px"
  });

  $(".carrierOrigin").select2({
    placeholder: "Select an option",
    allowClear: true,
    width: "245px"
  });

  (function() {
    $(".form-required").change(function() {
      var empty = false;
      $(".form-required").each(function() {
        if ($(this).val() === "") {
          empty = true;
        }
      });

      if (empty) {
        $("#createManifestButton").attr("disabled", "disabled");
      } else {
        $("#createManifestButton").removeAttr("disabled");
      }
    });
  })();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<table>
    <tr>
        <td class="labelTD">
            <label for="manifestNumber">Manifest No.:</label>
            <span class="requiredInput">*</span>
        </td>
        <td class="labelTD">
            <label for="date">Date Unloaded:</label>
            <span class="requiredInput">*</span>
        </td>
    </tr>
    <tr>
        <td class="detailsTD">
            <input type="text" class="form-control form-required" placeholder="Manifest Number" name="manifestNumber" id="manifestNumber"
                required>
        </td>
        <td class="detailsTD">
            <input type="date" name="dateUnloaded" id="dateUnloaded" class="form-control form-required" required>
        </td>
    </tr>
    <tr>
        <td class="labelTD">
            <label for="originTerminal">Origin Terminal:</label>
            <span class="requiredInput">*</span>
        </td>
        <td class="labelTD">
            <label for="carrierOrigin">Carrier Origin:</label>
            <span class="requiredInput">*</span>
        </td>
    </tr>
    <tr>
        <td class="detailsTD">
            <select class="form-control form-required terminalOrigin" required id="terminalOrigin" name="originTerminal">
                <option></option>
                <option value="CINC-Cincinatti">CINC-Cincinatti</option>
            </select>
        </td>
        <td class="detailsTD">
            <select class="form-control form-required carrierOrigin" required id="carrierOrigin" name="originCarrier">
                <option></option>
                @foreach($origins as $origin)
                <option value="{{ $origin->id }}">{{ $origin->customer_name }}</option>
                @endforeach
            </select>
        </td>
    </tr>

</table>
<button id="createManifestButton" class="btn btn-primary" disabled>Create New Manifest</button>