Javascript 如何通过单击按钮启用特定输入

我有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遍历来查找与单击按钮行相关的

输入

元素。为此，您可以结合使用

closest（）

和

find（）

还请注意，在第二次单击按钮时提交表单的一种更简单的方法是在HTML中将类型更改为

submit

，然后在第一次单击时使用

preventDefault（）

停止提交。试试这个：

$（'form.rule-form button.rule btn'）。单击（函数（e）{
var$btn=$（本）；
如果（$btn.text（）！=='Submit'）{
e、 预防默认值（）；
$btn.text（“提交”）；
$btn.closest（'.form行'）.find（'input'））
.prop（'disabled'，false）
.removeClass（“警报信息警报成功”）；
}
});

编辑
编辑
尝试查找同级并更改属性值

$（this.parent（）.sibbins（）.find（“.form group”）.removeAttr（“disabled”）；

同样，您也可以删除类

$('.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');
  })
})

您可以像传递父元素和查找元素一样简单地执行操作，您可以对元素执行任何操作
此查找输入并启用“点击时编辑”按钮如果单击“编辑”按钮，文本将在下次单击时变为“提交”。检查按钮文本是否为“提交”，如果为“提交”，则将提交表单


$（函数（）{$（'.rule btn'）。单击（函数（）{
如果（已单击）
{
$（this.attr（'type'，'submit'）；
返回；
}
$（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'）；
$（此）.text（“提交”）；
alreadyClicked=真；
log（$（this.attr（'class'））；
});
var alreadyClicked=false；
});

编辑
编辑
您似乎无法在
$（此）
下找到您的元素，因此向上导航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');
});

谢谢，它很有效。parent（）和closest（）之间的不同之处在于，似乎使用的是最接近的而不是parent（）。区别在于
parent（）
查找单亲元素，而
closest（）
查找DOM树的所有路径以查找您提供的选择器。您可以在文档中阅读更多内容：&如果单击外部输入或其他位置，如何使其恢复禁用状态？我应该再按一个按钮取消吗？那是最简单的方法。或者，您可以检测按钮或输入外的单击，然后取消：