Question

我有以下HTML：

<div class="field text-left">
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Name</label>
    <input type="text" id="name" name="name" placeholder="Name"/>
  </div>
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Surname</label>
    <input type="text" id="surname" name="surname" placeholder="Surname"/>
  </div>
</div>
<div class="field">
  <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
    <div class="col-lg-12 col-sm-12 col-xs-12">
      <a href="#" id="fullnameBtn" class="btn disabled">Next Step</a>
    </div>
  </div>    
</div>

以上是与其他值和隐藏面板的多步骤形式。

我想知道如果只使用JavaScript或jQuery输入姓氏和名称字段时，如何从id fullnameBtn 的标记中删除Class 禁用。

有人可以帮助走正确的道路吗？

由于

Answer 1

1 - 检查两个字段是否都已填满 2-然后删除“选定的”类

if($("name") && $("surname")){
  $("#fullnameBtn").removeClass("disabled");
}

Answer 2

以下是切换类的内容[但我仍然想要禁用并启用必须在禁用类中手动处理的nextPage链接]

$(document).ready(function(){
    // lets monitor the input of values for inputs you can use a class also
    $('input').on('input',function(){
       // added for bit of simplicity or you can directly get valuess
      var surname = $('#surname').val();
      var name = $('#name').val();
      if(surname != "" && name != "" )
      {
        // values seems filled remove class  
        $('#fullnameBtn').removeClass('disabled');
      }
      else
      {
        // user has emptied some input so add class again.
        $('#fullnameBtn').addClass('disabled');
      }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Name</label>
    <input type="text" id="name" name="name" placeholder="Name"/>
  </div>
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Surname</label>
    <input type="text" id="surname" name="surname" placeholder="Surname"/>
  </div>
 </div>
 <div class="field">
 <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
  <div class="col-lg-12 col-sm-12 col-xs-12">
    <a href="#" id="fullnameBtn" class="btn disabled">Next Step</a>
  </div>
 </div>  
                            </div>

当两个输入字段都填入时，JavaScript / jQuery更改类别的标记

2 个答案: