即使填写了每个字段,也不会启用提交按钮

时间:2016-06-03 10:28:19

标签: javascript jquery twitter-bootstrap-3

https://jsfiddle.net/xrxjoaqe/

我不知道引导内联验证文件有什么问题......即使在输入所有值后,提交按钮也没有启用。

$('#registerbutton').attr('disabled', 'disabled');

function updateFormEnabled() {
  if (verifyAdSettings()) {
    $('#registerbutton').attr('disabled', '');
  } else {
    $('#registerbutton').attr('disabled', 'disabled');
  }
}

function verifyAdSettings() {
  if ($('#b2b_service_type').val() != '') {
    return true;
  } else {
    return false
  }
}

$('#b2b_service_type').change(updateFormEnabled);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" role="form" id="bookform" data-toggle="validator" enctype="multipart/form-data">
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <input id="b2b_customer_name" name="b2b_customer_name" class="form-control input-lg headerform" type="text" required placeholder="Your Name *" pattern="^[_A-z\s]{3,}$" data-error="Please enter atleast 3 alphabets">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <input id="b2b_cust_phone" name="b2b_cust_phone" type="tel" class="form-control input-lg headerform" type="tel" maxlength="10" placeholder="Mobile Number. *" pattern="^[789]\d{9}$" data-error="Please enter a valid mobile number" required>
    <p class="help-block with-errors"></p>
  </div>
  <div class="form-group col-md-6 col-xs-6 has-feedback" style="padding:5px">
    <select id="b2b_service_type" name="b2b_service_type" class="form-control input-lg headerform status" required>
      <option value="" disabled="" selected="" hidden="">Service Type</option>
      <option value="22">something</option>
      <option value="34">Another</option>
    </select>
    <p class="help-block with-errors"></p>
  </div>
  <button id="registerbutton" type="submit" class="btn btn-xl submit" disabled>Submit</button>
  </div>
  <!-- Book div -->

2 个答案:

答案 0 :(得分:1)

从提供的小提琴/代码中,您似乎正在尝试:

  • 在组合更改时启用提交按钮

小提琴不起作用,因为你没有在javascript选项中包含jquery,而且你所包含的那个(通过脚本src)没有被加载,因为它不是https (始终检查浏览器控制台窗口 - 它显示http错误,并且未定义&#39;。

修复jquery链接(两者中的任何一个)仍然不能让它起作用,因为你已经使用了attr

将其更改为prop

$('#registerbutton').prop('disabled', 'disabled');

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#registerbutton').prop('disabled', '');
    } else {
        $('#registerbutton').prop('disabled', 'disabled');
    }
}

更新了小提琴:https://jsfiddle.net/xrxjoaqe/4/

答案 1 :(得分:1)

请确保&amp;在发布问题之前完成所有编辑。试试吧。这会对你有所帮助!

<button id="registerbutton" type="submit" class="btn btn-xl submit" disabled="disabled">Submit</button>

使用removeAttr

function updateFormEnabled() {
          if (verifyAdSettings()) {
            $('#registerbutton').removeAttr('disabled');
          } else {
            $('#registerbutton').attr('disabled', 'disabled');
          }
        }