如何使用按钮单击启用特定输入

我有10个输入的列表，带有禁用属性

<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

当我单击编辑按钮时，我想删除禁用的属性，并提醒类别的输入，该输入与该按钮相同。我尝试过这样的

$('form.rule-form').find('button.rule-btn').each(function(){
    $(this).click(function(){
        $(this).text('Submit');
        $('form.rule-form').find('input[name="rule"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-info');
        });
        $('form.rule-form').find('input[name="point"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-success');
        });
        $(this).click(function(){
            $('form.rule-form').submit();
        })
    });
});

，但是在我单击"编辑"按钮后，似乎启用了所有输入列表。

问题是因为您需要使用dom traversal查找与单击按钮行相关的 input元素。为此，您可以使用closest()和find()的组合。

另外，请注意，在按钮的第二次单击时提交表单的一种更简单的方法是将类型更改为HTML中的submit，然后在第一次单击时使用preventDefault()来停止提交。尝试以下操作：

$('form.rule-form button.rule-btn').click(function(e) {
  var $btn = $(this);
  if ($btn.text() !== 'Submit') {
    e.preventDefault();
    $btn.text('Submit');
    $btn.closest('.form-row').find('input')
      .prop('disabled', false)
      .removeClass('alert-info alert-success');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="10" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="1" data-poin="10">Edit</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="20" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="2" data-poin="20">Edit</button>
    </div>
  </div>
</form>

看起来您在$(this)下找不到元素，因此导航DOM层次结构将有所帮助：

$('button').click(function(){
    $(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
    $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
});

此查找输入并在clikcing编辑按钮上启用，如果单击"单击"按钮文本将更改为"下次单击"。提交表格。

$(function() {$('.rule-btn').click(function(){
if(alreadyClicked)
  {
    
  $(this).attr('type','submit');
   return;
  }
$(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
   $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
   $(this).attr('id','submit');
   $(this).text("submit");
   alreadyClicked = true;
   console.log($(this).attr('class'));
});
var alreadyClicked = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

$('.rule-btn').click(function(){
   $('input[name="rule"]', $(this).closest('.form-row')).each(function(){
     $(this).prop('disabled', false).toggleClass('alert-info');
 })
 $('input[name="point"]', $(this).closest('.form-row')).each(function(){
   $(this).prop('disabled', false).toggleClass('alert-success');
  })
})

您可以简单地喜欢通过父级并找到元素，您可以使用元素

做任何事情

尝试通过查找兄弟姐妹并更改属性值。

$(this).parent().siblings().find(".form-group").removeAttr("disabled");

同样的方式也可以删除课程。

相关内容

最新更新

热门标签：