Question

在我的页面上，我有许多按钮和形式：

 <div class="rows">
          <div class="row">
            <button class="open">btn1</button>
            <form>form1
              <button class="close">submit</button>
                <button class="ave">close</button>
            </form>

          </div>
          <div class="row">
            <button class="open">btn2</button>
            <form>form2
              <button class="close">submit</button>

                     <button class="ave">close</button>
            </form>
          </div>


        </div>

我不想：用户按下按钮，然后打开附在其上的表格。如果用户单击提交按钮，则表单已关闭，打开表单的按钮将变为不可用。如果用户单击关闭按钮，则表示只是关闭，而不会使按钮不可用。我的剧本：

$(function() {
      $('.rows').on('click', '.open', function() {
        $(this).parent().children('form').show();
        $(this).attr('disabled', true);

      });

      $('.rows').on('click', '.close', function(e) {
        e.preventDefault();
        $(this).parent('form').hide();

      });

    $('.rows').on('click', '.ave', function() {
        e.preventDefault();
        $(this).parent('form').hide();
         $(this).parent('.open').attr('disabled',  false);
      });

    });



form {
  display: none;
  padding: 20px;
  border: 1px solid red;
}

现在点击关闭按钮，提交后可以使用所有按钮。我点击错误的脚本或页面更新？

Answer 1

在您的代码中，您正在使用类open定位按钮，该类不是类ave的关闭按钮的父级。您需要使用课程row（通过parent或closest）定位父div，然后找到它的子按钮。

$('.rows').on('click', '.ave', function(e) {
        e.preventDefault();
        $(this).parent('form').hide();
        $(this).closest('.row').find('.open').prop('disabled', false);
      });

示例：https://jsfiddle.net/25c0fvcy/4/

Jquery按表单禁用不同的按钮

1 个答案: