Question

我有5个输入字段3个是select，2个是输入类型和1个提交按钮。我希望在所有字段都有值时启用提交按钮。如果任何值丢失按钮应再次禁用，如＆amp;条件

以下是我的代码

<select class='form-control class-manufacturer' name="" id='id_manufacturer>
        <option value="" selected disabled>Manufacturer *</option>
        <option value="">Apple</option>
        <option value="">Samsung</option>
</select>
<select class='form-control class-modelName' name="" id='id_modelName">
        <option value="" selected disabled>Model *</option>
        <option value="" >Iphone</option>
        <option value="" >Note</option>
</select>
<select class='form-control class-partName' name="" id='id_partName' >
        <option value="" selected disabled>Part *</option>
        <option value="" >IC</option>
        <option value="">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control class-quantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control class-costPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

如果所有字段都使用jquery

，则我想启用和禁用addrow按钮

我尝试了什么

<!--add button disable enable function-->
$(function(){
 var i;
$('.class-manufacturer').change(function(){
$('.class-modelName').change(function() {
$('.class-partName').change(function(){

$('.class-quantity').keypress(function() {
$('.class-costPerUnit').keypress(function(){

$('.add-row').prop('disabled', false);
}); }); }); }); });
 });

Answer 1

＆＃13;

[Files]
Source: "MyProg.exe"; DestDir: "{code:GetAppData}"

[Code]

var
  AppDataPath: string;

function GetAppData(Param: string): string;
begin
  Result := AppDataPath;
end;  

function InitializeSetup(): Boolean;
var
  Uniq: string;
  TempFileName: string;
  Cmd: string;
  Params: string;
  ResultCode: Integer;
  Buf: AnsiString;
begin
  AppDataPath := ExpandConstant('{userappdata}');
  Log(Format('Default/Fallback application data path is %s', [AppDataPath]));
  Uniq := ExtractFileName(ExpandConstant('{tmp}'));
  TempFileName :=
    ExpandConstant(Format('{commondocs}\appdata-%s.txt', [Uniq]));
  Params := Format('/C echo %%APPDATA%% > %s', [TempFileName]);
  Log(Format('Resolving APPDATA using %s', [Params]));
  Cmd := ExpandConstant('{cmd}');
  if ExecAsOriginalUser(Cmd, Params, '', SW_HIDE, ewWaitUntilTerminated, ResultCode) and
     (ResultCode = 0) then
  begin
    if LoadStringFromFile(TempFileName, Buf) then
    begin
      AppDataPath := Trim(Buf);
      Log(Format('APPDATA resolved to %s', [AppDataPath]));
    end
      else
    begin
      Log(Format('Error reading %s', [TempFileName]));
    end;
    DeleteFile(TempFileName);
  end
    else
  begin
    Log(Format('Error %d resolving APPDATA', [ResultCode]));
  end;

  Result := True;
end;

＆＃13;

$(document).ready(function(){
var $classmanufacturer = $('.classmanufacturer');
var $classmodelName = $('.classmodelName');
var $classpartName = $('.classpartName');
var $classquantity = $('.classquantity');
var $classcostPerUnit = $('.classcostPerUnit');
var $addbtn = $('.addbtn')
  $('select, input').on('change keypress', function(){
    if(($classmanufacturer.val() != '') && ($classmodelName != '') && ($classpartName.val() != '') && ($classquantity.val() != '') && ($classcostPerUnit.val() != '')){
        $addbtn.removeAttr('disabled');
    } else {
      $addbtn.attr('disabled', 'disabled');
    }
  })
})

function add() {
  alert("enabled");
}

＆＃13;

Answer 2

添加 HTML

answerObj = AnswerExchange(answer=ans_json["answer"])

使用此<input type="submit" id="addRow" value="addRow" disabled="disabled" />代码

js

Answer 3

看看这段代码：

$(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

Answer 4

请注意，选择框中的每个选项都没有值。

您可以轻松地在具有类form-control的每个元素上绑定输入事件，以确定禁用状态。

使用此代码：

function checkForm() {
    var disable = false;
    $(".form-control").each(function() {
        var value = $(this).val();
        if (!value) {
            disable = true;
            return false;
        }
    });

    $("button.add-row").prop("disabled", disable);
}

$(function() {
    $(".form-control").on("input", checkForm);
});

Answer 5

提供value元素<option>属性html的值，该值不是空字符串。

您可以将<select>，<input>元素设置为<form>元素的子节点，在元素中包含required属性，使用input附加到form的事件1}}，在.checkValidity()条件下调用if，如果true在.removeAttribute()元素上调用.btn，"disabled"作为参数，则调用{{ 1}} .setAttribute()作为第一个和第二个参数

"disabled"

document.querySelector("form[name=form]")
.oninput = function() {
    if (this.checkValidity()) {
      this.querySelector(".btn")
      .removeAttribute("disabled")
    } else {
      this.querySelector(".btn")
      .setAttribute("disabled", "disabled")
    }
}

Answer 6

您可以在required，<select>元素，<input>，:invalid :valid伪类选择器中使用css属性，设置{{1如果pointer-events无效，则<button>元素的属性为none，如果有效则为form

all

form:invalid button.btn {
  pointer-events: none;
}

form:valid button.btn {
  pointer-events: all;
}

Answer 7

   $(document).on('keyup change', 'form', function(){
  // Loop through all elements of form
  $.each($('form').find(':input'), function(){
    if($(this).val() == ""){
      // If any value is empty, disable button and break the loop
      $('button').attr('disabled', 'disabled');
      return false;
    }
  })
  // Else if all are filled
  $('button').removeAttr('disabled');
});

如何使用jquery检查多个输入字段中是否包含值？

7 个答案: