Question

我有一个包含多种不同字段类型的表单，所有这些字段都需要在提交之前完成。我已禁用提交按钮，并希望在所有字段都有值后删除已禁用的属性。

我在此功能的先前问题中使用了radios和checkboxes的示例，并且我已经阅读了一些答案，其中显示了如何仅使用<input>字段实现此目的：

但是有什么方法可以检查所有字段类型是否都使用jQuery值？包括<select>和<textarea>字段？

以下是我的表单基本版本的Codepen，这是我的HTML：

<div class="contact-form">
    <div class="contact-form__row">
        <p>Text field</p>
        <input type="text" />
    </div>
    <div class="contact-form__row">
        <p>Radio fields</p>
        <label for="radio-1">Radio 1</label>
        <input id="radio-1" type="radio" name="radio-option" />
        <label for="radio-2">Radio 2</label>
        <input id="radio-2" type="radio" name="radio-option" />
    </div>
    <div class="contact-form__row">
        <p>Checkbox fields</p>
        <label for="checkbox-1">Checkbox 1</label>
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input id="checkbox-2" type="checkbox" />
    </div>
    <div class="contact-form__row">
        <p>Select options</p>
        <select id="my-select" name="my-select">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
        </select>
    </div>
    <div class="contact-form__row">
        <p>Text area</p>
        <textarea></textarea>
    </div>
    <div class="contact-form__row">
        <input type="submit" value="Submit" disabled />
    </div>
</div>

这可能吗？

Answer 1

你可以用jQuery做这样的事情:(在codepen中用你的代码替换你所有的javascript，我已经在你的codepen中测试了它）

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

祝你好运！

Answer 2

一些评论：

在下一个片段中，我假设在提交表单之前必须填写所有输入（单选按钮除外），这不一定代表所有现实生活场景。
如上所述，无线电（在本例中仅为2个）给予特殊处理，因为每组只能选择一个。
关于RxSearch.fromSearchView(searchView) .debounce(300, TimeUnit.MILLISECONDS) .filter(item -> item.length() > 1) .observeOn(AndroidSchedulers.mainThread()) .subscribe(query -> { adapter.setNamesList(namesAPI.searchForName(query)); adapter.notifyDataSetChanged(); apiCallsTextView.setText("API CALLS: " + apiCalls++); }); public class RxSearch { public static Observable<String> fromSearchView(@NonNull final SearchView searchView) { final BehaviorSubject<String> subject = BehaviorSubject.create(""); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { subject.onCompleted(); return true; } @Override public boolean onQueryTextChange(String newText) { if (!newText.isEmpty()) { subject.onNext(newText); } return true; } }); return subject; } } s，如果选择空选项（如果存在），则认为该选项无效。在此示例中，您的选择标记始终具有非空值，我在标记中添加了另一个以显示其行为。

让我知道它是否有效

<select>

$(document).ready(function() {

 $(":input").on('input', function(){validate();});
 $(":input").on('change', function(){validate();});
});

function validate() {
  var $submitButton = $("input[type=submit]");
  
  var isValid = true;
  
  if($(':checkbox:checked').length != $(':checkbox').length)
    isValid = false;
  else if($(':radio:checked').length == 0)
    isValid = false;
  else{
    $('input:text, textarea').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    if(isValid){
      $('select').each(function() {  
      if($(this).val() == ''){
        isValid = false;
        return false;
      }
    });
    }
  }
  
   $submitButton.prop("disabled", !isValid);
}

.contact-form {
	width: 400px;
	margin: 50px;
}

.contact-form__row {
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: 1px solid grey;
}

p {
	font-weight: bold;
}

使用jQuery禁用提交按钮，直到所有字段都有值（输入，广播，选择，复选框）

2 个答案: