Question

目前，我有以下表格：

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

最后点击此按钮：

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

现在我一直试图使用其他人＆＃39;示例，但脚本拒绝为我工作，即选择选项。

目前，我正在使用这个jsfiddle：http://jsfiddle.net/qKG5F/3370/，它基于这个问题的答案：Disabling submit button until all fields have values

不幸的是，在评论中，没有人回答有关其他用途的问题（如单选按钮，复选框），但是选择的问题从未得到回复。那么我有什么办法吗？我想特别禁用该按钮，因为它运行一个AJAX脚本，并且为了普通用户，我只想禁用该按钮，直到填写所有字段，包括选择。

Answer 1

(function() {    
    $('.manifestSubmit').change(function(){
      $('.manifestSubmit').each(function(idx, elm){ 

        if (elm.value == 'Please Choose' || elm.value.length == 0) {
          $('#register').attr('disabled', 'disabled');
          return false;      
        }

        if ((idx+1) == $('.manifestSubmit').length)
          $('#register').removeAttr('disabled');
      });
    });
})()

你可以用选项标签做“Rasmus Stougaard”并避免这种情况（elm.value =='请选择'||）

Answer 2

在您的示例中，选择＆＃34;空白＆＃34;选项应该具有值＆＃34;＆＃34;像这样：

<option value="">Please Choose</option>

检查此更新的小提琴http://jsfiddle.net/qKG5F/3380/

Answer 3

根据您之前链接的jsfiddle，我分叉并修改为代码以使用您的表单。见这里：http://jsfiddle.net/xrc35p7b/6/

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

所有带有“form-required”类的表单字段（任何类型）都需要具有非空值才能启用该按钮。

在jQuery中禁用按钮，直到所有必填字段都有值（特别是选择）

3 个答案: