复选框Javascript禁用按钮

Question

我在php中有一组用户，我发送到视图（在laravel中）并执行foreach以列出表中的所有用户。现在好了。我有一个＆＃34;发送＆＃34;按钮出现禁用但我想在我点击复选框时显示。

我把这个javascript代码：

<script type="text/javascript">
Enable = function(val)
{
    var sbmt = document.getElementById("send"); //id of button

    if (val.checked == true)
    {
        sbmt.disabled = false;
    }
    else
    {
        sbmt.disabled = true;
    }
}    
</script>

并调用函数onClick方法的复选框：

onclick="Enable(this)"

但问题是，当我点击复选框时，只有第一个按钮发送工作并显示可见。如果我点击位于2,3,4 ......等用户的复选框中，这些用户的按钮发送保持禁用状态，只有第一个看起来可见。此代码仅适用于发送按钮的第一个位置。

感谢您的帮助:)。

此致

Answer 1

1. 您将元素传递给函数Enable，但将其视为值。您应该在执行其他操作之前从元素中提取值。
2. 您在函数中硬编码了按钮ID。它会传递到外面，每个按钮都应该有所不同。
＆＃13;
＆＃13;
Enable = function(checkbox, btnId)
    {
        document.getElementById(btnId).disabled = !checkbox.checked; // ← !
    }
＆＃13;
<button id="send1" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send1')"><br>
<button id="send2" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send2')"><br>
<button id="send3" disabled>SEND</button>
<input type="checkbox" onclick="Enable(this, 'send3')">
＆＃13;
＆＃13;
＆＃13;

Answer 2

原因是您正在使用id元素激活按钮。 您可以做的是为您的每个发送按钮设置ID，同时循环并从您点击您的功能传递它并使用它启用它。

<script type="text/javascript">
Enable = function(val, id)
{
    var sbmt = document.getElementById("send-"+ id ); //id of button

    if (val.checked == true)
    {
        sbmt.disabled = false;
    }
    else
    {
        sbmt.disabled = true;
    }
}    
</script>

，您的点击按钮如下所示

onclick="Enable(this,id)"

希望你理解。