如何在更改两个字段后自动启用发布按钮

时间:2016-12-18 21:20:49

标签: jquery html

我正在尝试在用户更改日期字段并选择一个选项时生成自动发布按钮。我被卡住了。我不知道什么是错的。这是我的代码。

<select>
  <option value="Section A">Section A</option>
  <option value="Section B">Section B</option>
  <option value="Section C">Section C</option>
</select>

<input class="time" id="date_one" type="text" />
<input class="time" id="date_two" type="text" />
<input class="time" id="date_two" type="text" />

<input type="submit" disabled="disabled" id="pub" value="Publish"/>

三个输入字段是日期选择器。只有当所有这三个输入字段和选择字段都更改时,才会启用按钮。我的jquery代码是:

$('select').on('change',function(){
   validatePub();
});

$('input[type="text"]').on('keyup',function(){
   validatePub();
});

function validatePub() {
    $("input[type='text']").each(function(){
    if ($(this).val() != "" )
    {
        if(($(".time").val().length !=" "))
        {

            $("#pub").removeAttr("disabled"); 
        }
        else {
            $("#pub").attr("disabled", "disabled");
        }
    }
  });
}

1 个答案:

答案 0 :(得分:0)

你走了,这很有效。

            $('select').on('change',function(){
               validatePub();
            });

            $('input[type="text"]').on('keyup',function(){
               validatePub();
            });

            function validatePub() {
              var resultFalse = '';
                $("input[type='text']").each(function(){
                  if ($(this).val() == "") {
                    resultFalse += false;
                  }
                })
                if (resultFalse == '') {
                  $("#pub").removeAttr("disabled"); 
                } else {
                  $("#pub").attr("disabled", "disabled");
                }
             }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="Section A">Section A</option>
  <option value="Section B">Section B</option>
  <option value="Section C">Section C</option>
</select>

<input class="time" id="date_one" type="text" />
<input class="time" id="date_two" type="text" />
<input class="time" id="date_two" type="text" />

<input type="submit" disabled="disabled" id="pub" value="Publish"/>