如果文本的值不起作用，则从按钮中删除禁用的属性答案

【问题标题】：Remove disabled attr from button if text has value not working如果文本的值不起作用，则从按钮中删除禁用的属性
【发布时间】：2019-05-02 11:25:24
【问题描述】：

我正在创建一个多步骤弹出表单，并且只希望#next 按钮在选择输入字段时处于活动状态。我已经设法让它适用于复选框和单选字段，但由于某种原因，它不适用于文本和文本区域字段。

我使用与复选框和单选字段相同的代码，但不是检查is(:checked)，而是定位.val() != ""。

测试时，它只有在我转到.multi-step-section，填写文本字段，返回上一个屏幕，然后返回包含该字段的部分时才有效。我想活跃班还在看上一节。

在禁用按钮之前，有没有办法检查以确保在当前活动屏幕上检查了 input[type="text"] 和 input[type="textarea"] 字段？

完整弹出表单的链接：https://jsfiddle.net/5yd23jah/

$(function() {
  $('.multi-form-actions button').on('click', function() {

    var el = $(this).attr('id');
    var active = $('.multi-step-section.active');

    active.add(active.siblings()).removeClass('active');

    if (el == 'prev') {
      active = active.prev('.multi-step-section').addClass('active');
      $('#progressbar > span').css({
        'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 - sectionProgress + '%'
      });
    } else if (el = 'next') {
      active = active.next('.multi-step-section').addClass('active');
      $('#progressbar > span').css({
        'width': $('#progressbar > span').width() / $('#progressbar').width() * 100 + sectionProgress + '%'
      });
    }

    if ((active).find("input[type='radio'], input[type='checkbox']").is(':checked')) {
      $('#next').removeAttr('disabled');
    } else if ((active).find("input[type='text'], input[type='textarea']").val() != "") {
      console.log('not empty');
      $('#next').removeAttr('disabled');
    } else {
      $('#next').attr('disabled', 'disabled');
    }

    if (active.is(":not(:first-child)")) {
      $('#prev').show();
    } else {
      $('#prev').hide();
    }

    if (active.is(":last-child")) {
      $('#next').hide();
      $('#submit').show();
    } else {
      $('#next').show();
      $('#submit').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">
      <h3>Question 1</h3>
      <p><span class="wpcf7-form-control-wrap radio-185"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Loft</span><input name="radio-185[]" type="checkbox" value="Loft"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Garage ceiling</span><input name="radio-185[]" type="checkbox" value="Garage ceiling"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Floor</span><input name="radio-185[]" type="checkbox" value="Floor"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Ceilings</span><input name="radio-185[]" type="checkbox" value="Ceilings"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Stud walls</span><input name="radio-185[]" type="checkbox" value="Stud walls"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Special project</span><input name="radio-185[]" type="checkbox" value="Special project"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step2">
      <h3>Question 2</h3>
      <p><span class="wpcf7-form-control-wrap text-465"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text" name="text-465" placeholder="Enter postcode, city or address" size="40" type="text" value=""></span></p>
    </div>
    <div class="multi-step-section" id="step3">
      <h3>Question 3</h3>
      <p><span class="wpcf7-form-control-wrap radio-187"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">up to 30m2</span><input name="radio-187" type="radio" value="up to 30m2"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">30-60m2</span><input name="radio-187" type="radio" value="30-60m2"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">60-100m2</span><input name="radio-187" type="radio" value="60-100m2"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">0ver 100m2</span><input name="radio-187" type="radio" value="0ver 100m2"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step4">
      <h3>Question 4</h3>
      <p><span class="wpcf7-form-control-wrap radio-188"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Ready to go</span><input name="radio-188" type="radio" value="Ready to go"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">In the next couple of months</span><input name="radio-188" type="radio" value="In the next couple of months"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">In a few months</span><input name="radio-188" type="radio" value="In a few months"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step5">
      <h3>Question 5</h3>
      <p><span class="wpcf7-form-control-wrap radio-189"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Domestic</span><input name="radio-189" type="radio" value="Domestic"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Commercial</span><input name="radio-189" type="radio" value="Commercial"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Construction</span><input name="radio-189" type="radio" value="Construction"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step6">
      <h3>Question 6</h3>
      <p><span class="wpcf7-form-control-wrap email-871"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" name="email-871" placeholder="Enter your email address" size="40" type="email" value=""></span></p>
      <div>
        or
      </div>
      <p><span class="wpcf7-form-control-wrap tel-525"><input aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" name="tel-525" placeholder="Enter your telephone number" size="40" type="tel" value=""></span></p>
    </div>
  </div>
  <div class="multi-form-actions">
    <button id="prev" type="button">Back</button><button disabled id="next" type="button">Continue</button><input class="wpcf7-form-control wpcf7-submit multiform-submit" id="submit" type="submit" value="Send"><br>
    <input class="sr-only" id="reset" type="reset">
  </div>
</div>

【问题讨论】：

没有type='textarea'。 input[type='textarea'] 错了。
您好艾迪森，感谢您的评论。 is(':checked') 工作正常，因为如果至少选中一个框，我希望禁用该按钮。我在这里包含了完整的示例：jsfiddle.net/5yd23jah
不，你是对的。我没有意识到不是所有的问题都会一次显示出来，因为演示代码不会隐藏它们
是的，很抱歉，当我第一次问这个问题时，我应该包含链接。我不得不承认我的js技术不是最好的，我还在学习，所以代码可能有点沉重

标签： javascript jquery html

【解决方案1】：

你是说

    var active = $('.multi-step-section.active');  
    var dis = active.find("input[type='radio']:checked").length == 0;
    dis = dis && active.find("input[type='checkbox']:checked").length == 0;
    dis = dis && active
      .find("input:text,textarea")
      .map(function(idx, elem) {
        return $(elem).val() || null; // beware of valid values of 0 (zero)
      }).get().length == 0;

    $('#next').prop('disabled', dis);

进度条代码：

  $('#pBar').prop("max",$('.multi-step-section').length).val(0); // loading
  ...
  $('#pBar').val(active.index()); // each click on the prev/next

运行示例

// reusable function
function checkInput() {
    var active = $('.multi-step-section.active');  
    var dis = active.find("input[type='radio']:checked").length == 0;
    dis = dis && active.find("input[type='checkbox']:checked").length == 0;
    dis = dis && active
      .find("input:text,textarea")
      .map(function(idx, elem) {
        return $(elem).val() || null;
      }).get().length == 0;

    $('#next').prop('disabled', dis);
}

$(function() {
  $(":input").on("input", checkInput); // any input 

  $('#pBar').prop("max",$('.multi-step-section').length).val(0);

  $('.multi-form-actions button').on('click', function() {

    var el = $(this).attr('id');
    var active = $('.multi-step-section.active');
    var count = $('.multi-step-section').length;
    active.add(active.siblings()).removeClass('active');

    if (el == 'prev') {
      active = active.prev('.multi-step-section').addClass('active');
    } else if (el = 'next') {
      active = active.next('.multi-step-section').addClass('active');
    }
    $('#pBar').val(active.index());


    checkInput(); // reset the continue if needed


    if (active.is(":not(:first-child)")) {
      $('#prev').show();
    } else {
      $('#prev').hide();
    }

    if (active.is(":last-child")) {
      $('#next').hide();
      $('#submit').show();
    } else {
      $('#next').show();
      $('#submit').hide();
    }
  });
});

.multi-step-section {
  display: none
}

.active {
  display: block
}

#progressbar { background-color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">
      <h3>Question 1</h3>
      <p><span class="wpcf7-form-control-wrap radio-185"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Loft</span><input name="radio-185[]" type="checkbox" value="Loft"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Garage ceiling</span><input name="radio-185[]" type="checkbox" value="Garage ceiling"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Floor</span><input name="radio-185[]" type="checkbox" value="Floor"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Ceilings</span><input name="radio-185[]" type="checkbox" value="Ceilings"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Stud walls</span><input name="radio-185[]" type="checkbox" value="Stud walls"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Special project</span><input name="radio-185[]" type="checkbox" value="Special project"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step2">
      <h3>Question 2</h3>
      <p><span class="wpcf7-form-control-wrap text-465"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text" name="text-465" placeholder="Enter postcode, city or address" size="40" type="text" value=""></span></p>
    </div>
    <div class="multi-step-section" id="step3">
      <h3>Question 3</h3>
      <p><span class="wpcf7-form-control-wrap radio-187"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">up to 30m2</span><input name="radio-187" type="radio" value="up to 30m2"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">30-60m2</span><input name="radio-187" type="radio" value="30-60m2"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">60-100m2</span><input name="radio-187" type="radio" value="60-100m2"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">0ver 100m2</span><input name="radio-187" type="radio" value="0ver 100m2"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step4">
      <h3>Question 4</h3>
      <p><span class="wpcf7-form-control-wrap radio-188"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Ready to go</span><input name="radio-188" type="radio" value="Ready to go"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">In the next couple of months</span><input name="radio-188" type="radio" value="In the next couple of months"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">In a few months</span><input name="radio-188" type="radio" value="In a few months"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step5">
      <h3>Question 5</h3>
      <p><span class="wpcf7-form-control-wrap radio-189"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Domestic</span><input name="radio-189" type="radio" value="Domestic"></label>
        </span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Commercial</span><input name="radio-189" type="radio" value="Commercial"></label>
        </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Construction</span><input name="radio-189" type="radio" value="Construction"></label>
        </span>
        </span>
        </span>
      </p>
    </div>
    <div class="multi-step-section" id="step6">
      <h3>Question 6</h3>
      <p><span class="wpcf7-form-control-wrap email-871"><input aria-invalid="false" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" name="email-871" placeholder="Enter your email address" size="40" type="email" value=""></span></p>
      <div>
        or
      </div>
      <p><span class="wpcf7-form-control-wrap tel-525"><input aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" name="tel-525" placeholder="Enter your telephone number" size="40" type="tel" value=""></span></p>
    </div>
  </div>
  <div class="multi-form-actions">
    <button id="prev" type="button">Back</button><button disabled id="next" type="button">Continue</button><input class="wpcf7-form-control wpcf7-submit multiform-submit" id="submit" type="submit" value="Send"><br>
    <input class="sr-only" id="reset" type="reset">
  </div>
</div>
<progress id="pBar" value="0">70 %</progress>

【讨论】：

不确定.is(':checked').length 逻辑是否正确。在回答所有问题之前，该按钮需要保持禁用状态。因此需要至少有一个复选框/单选按钮在每个组中才能启用。一起检查所有单选按钮的状态并不能测试。
@ADyson 已更新。并且每个部分都针对活动部分进行测试
好点。演示代码不显示和隐藏，所以我不明白不是所有的问题都会一次显示。
我没有看到进度条。我做了一个比你的更简单的 - 查看更新
谢谢！我不知道您可以简单地使用带有 HTML 标记的进度条。