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，在它准备好之前做它是不安全的＃34;。

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

＆＃13;

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

＆＃13;

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

＆＃13;

禁用按钮，直到填写表格（选择没有效果）

1 个答案: