使用 jQuery 禁用元素答案

【问题标题】：Using jQuery To Disable Element使用 jQuery 禁用元素
【发布时间】：2021-11-04 13:22:40
【问题描述】：

我有一个用 ColdFusion 编写的代码，它产生一个来自 SQL 查询的输入的列表，代码如下：

<cfquery datasource="#request.dsn#" name="getProdInfo">
        Select * from dbo.Lines,dbo.[Shift],dbo.operations 
        where lineID=#form.SELLINE# and ShiftID=#form.SELSHIFT#
</cfquery>
<cfoutput query="getProdInfo">
 <div class="control-group">
    <label for="Ops">#OperationName# </label>
     <input class="input-xlarge focused" id="prods" name="prod" placeholder="Enter Production" 
        type="number"  validate="integer"  />

  <select name="Test" id="test">
     <option>Option1</option>
     <option >Option2</option>  
 </select>
 </div>
<!--- Hidden Field--->
<input class="input-small focused" id="trgt" name="Target" value="580">
</cfoutput>

此代码生成 6 个输入字段、6 个选择和 6 个隐藏目标字段（对于结果集上的非 CFers cfoutput 循环）。我想执行一个 jQuery，如果输入字段小于目标的 70%，它应该启用 Select Dropdown 否则保持禁用。我的jQuery如下

<script type="application/javascript">
    $('#prods').on('focusout', function(){
        var element1 = document.getElementById("prods").value;
        var element2 = document.getElementById("trgt").value;
        var calc = (element1/element2)*100
        if (calc<70){
            $("#test").attr('disabled','disabled')
        }
        
        });
</script>

行为是，当 jQuery 测试第一个字段时，它会禁用第一个选择，但不适用于其他 5 个选择。我认为我的 jQuery 缺少为输入选择的元素的 ID。

我希望我已经澄清了我的观点。帮助表示赞赏

【问题讨论】：

您使用的是 jQuery，但也使用了getElementById。这会在一段时间后变得混乱。也许坚持使用 jQuery 或 vanilla JS 来选择元素。
您的输入ids 不是唯一的，因此您的jQuery 只影响第一个。您可以通过将 #getProdInfo.currentRow# 添加到 ID 来使它们独一无二。或者，您可以使用类而不是 id，然后循环 document.querySelectorAll(assignedclassname)。不相关，但您的 label 的 for 属性是“Ops”，但您没有 ID 为“Ops”的元素。
@user1599011 对“id”提出了一个很好的观点。根据您稍后处理表单数据的方式，您可能还需要创建唯一的name。与您的问题无关，但非常重要的是，该查询容易受到 sql 注入的影响。始终对用户值使用 cfqueryparam，例如 #form#,#url#, etc...
@user1599011 被邀请将他的评论放入答案中。

标签： javascript jquery coldfusion

【解决方案1】：

我最熟悉 vanilla JS，所以我将使用它。

我认为这就是您可能正在尝试做的事情。由于您正在循环查询，因此您需要将事件侦听器添加到每个 prod 元素，我不知道在这种情况下是否需要 id，但我总是将名称和 ID 作为标准属性包含在内。 ID 必须是唯一的，所以我从您的查询中添加了一个唯一的 ID。您还可以使用查询中的 id 列。如果您想通过表单提交该名称，您将特别需要该名称。它可能是唯一的，也可能不是唯一的，这取决于您处理输入的方式。 prod 类用于选择所有相似的元素并添加事件监听器。

由于我在这里查看每个 prod 元素以添加事件侦听器，因此我们可以捕获该事件 e 并使用事件的目标 e.target 来检索值。

我还更新了您标签中的for 属性。没有 id 为 Ops 的元素，并且 id 无论如何都必须是唯一的。该标签以前不会做任何事情。

document.querySelectorAll(".prod").forEach(
  function(p) {
    p.addEventListener(
      "focusout",
      function(e){
        var element1 = e.target.value;
        var element2 = document.getElementById("trgt").value;
        var calc = (element1/element2)*100
        if (calc<70){
            document.getElementById("test").disabled = "disabled";
        }//if
      }//function(e)
    )//addEventListener
  }//function(p)
);

<cfoutput query="getProdInfo">
  <div class="control-group">
      <label for="prods#getProdInfo.currentRow#">#OperationName# </label>
      <input class="input-xlarge focused prod" id="prods#getProdInfo.currentRow#" name="prod#getProdInfo.currentRow#" placeholder="Enter Production" type="number"  validate="integer"  />

    <select name="Test" id="test">
       <option>Option1</option>
       <option >Option2</option>  
    </select>
  </div>
 </cfoutput>

【讨论】：

嗨，感谢您的努力，我得到了一个未捕获的类型错误：无法在 HTMLInputElement 读取未定义的属性（读取“值”）。
另外，无法理解 e.target.value 逻辑。谢谢你帮忙。多一点努力就可以完成这项工作。谢谢
@Tayyab - A) 如果您需要跟踪为哪个输入选择了哪个列表项（可能是），两者都必须具有唯一字段“名称”，而不仅仅是“ID”。使用 currentRow 或查询中的 ID，如 user1599011 所说 B）如果只有一个“目标”值，请不要将该字段放在 cfoutput 循环中，因为这会创建相同的隐藏字段 6 次，当您只需要 1 个（续）
C) 与主要问题无关，但您是否故意进行CROSS JOIN 查询？如果是这样，最好使用 ANSI92 CROSS JOIN 使其更清晰。 D) 不要忘记添加 cfqueryparam 以避免被 sql 注入攻击。
@user1599011 - 很好的例子，如果值为 >= 70，请不要忘记重新启用该字段（并在循环外添加回“目标”字段）:-)跨度>

【解决方案2】：

您可以使用 .prop 将 disabled 设置为 true 或 false。添加了文档链接。

$("#test").prop("disabled", true) -- disable
$("#test").prop("disabled", false) -- enable

https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/

【讨论】：

【解决方案3】：

最好只在 vanilla JS 中使用它并停止使用 jQuery，哈哈，2021 年了

element.disabled = true;
element.disabled = false;

【讨论】：