Jquery - 如果满足条件则禁用字段

Posted 2023-05-09

【中文标题】Jquery - 如果满足条件则禁用字段

【英文标题】：Jquery - Disable field if criteria is met

【发布时间】：2016-06-13 14:22:33

【问题描述】：

我有一个有 15 行的表单。每行都有一个编号为 1 - 15 (row_id) 的 ID，每行包含一个选择字段和多个文本字段。

我想要做的是，如果 row_id 6 或以上的 select 选项设置为 0 以外的任何值，则禁用 row_id 5，如果 row_id 11 或以上的 select 选项设置为 0 以外的任何值，则禁用row_id 10。

例如：

Any select > 0 on rows 6 - 15 will disable row 5
AND 
Any select > 0 on rows 11 -15 will disable row 10

所以在第 12 行选择 2 会禁用第 5 行和第 10 行

我创建了一个小提琴来显示表格以及如何设置 row_ids，但我现在知道如何做到这一点.. http://jsfiddle.net/v0kvwfje/2/

有什么建议吗？

---

编辑：小提琴代码：

 $("select").change(function() 
      id = $(this).attr("row_id");
      val = $(this).val();
 );

【问题讨论】：

到目前为止您尝试过什么？展示你的测试以及目前没有工作的地方

【参考方案1】：

你可以这样做：

 $("select").change(function() 
      var disabled = false;
      var selects = $("select");
      for (var i=selects.length - 1; i >= 4; i--) 
          if (i % 5 == 4) $(selects[i]).prop("disabled", disabled);
          disabled |= selects[i].value;
      
 );

Fiddle.

此代码将从下到上遍历SELECT 元素。每当它发现一个非零条目时，它会将 disabled 变量设置为true；在循环的其余部分中，它永远无法再次获得false。

一旦遇到特殊的第 10 行和第 5 行（从零开始编号的 4 和 9），该 disabled 值将用于设置相应元素的disabled 属性。

如果您决定将列表扩展为多 5 行，并希望应用相同的原则来启用/禁用第 15 个SELECT 元素，则无需更改上述代码。无论列表有多长，它都会为每五个 SELECT 元素完成这项工作。

【讨论】：

谢谢这很好用。你能解释一下for (var i=selects.length - 1; i >= 4; i--) if (i % 5 == 4) $(selects[i]).prop("disabled", disabled); 如果我想让它适用于 10/20 条目、9/18 或 6/12 等，我需要做什么？

该代码的关键部分是i % 5 == 4。这意味着：i 除以 5 余数为 4。如果你想将它应用到 10/20 条目，你可以写 i % 10 == 9。对于 9/18，您可以写 i % 9 == 8。最后一个示例的另一种方法是(i+1)%9==0。那可能是更好的代码，因为这样您只需要更改 9。0 始终保持不变。

@JeffVader，这回答了你的问题吗？

谢谢，很有帮助。

快速跟进。如果设置了 9 或 18，我如何为 27 个条目执行此操作？我可以改变选择的背景颜色吗？我花了很多时间尝试这个，但无法让它工作..谢谢

【参考方案2】：

第 6 - 15 行的任何选择 > 0 都会禁用第 5 行

使用您已经设置的变量将其转换为代码：

任何=if 选择 > 0 = val > 0 第 6-15 行 = id >= 6（因为有 15 行，无需明确检查） 禁用第 5 行 $("[row_id=5]").attr("disabled", true)

即：

if (val>0 && id>=6) $("[row_id=5]").attr("disabled", true)
if (val>0 && id>=11) $("[row_id=10]").attr("disabled", true)

如果您想要例如 6-10 而不是 6-end，则添加：(val>0 and id>=6 && id<=10)

或者更通用的情况是在选择之前禁用所有内容：

  for(var i=1;i<id;++i)
      $("[row_id='" + i + "']").attr("disabled", true);

【参考方案3】：

试试这个代码

 $("select").change(function() 

  //new code starts here
  var section1 = false;
  var section2 = false;
  var indx = 0;
  $("table tr").each(function()
         if(indx>=6 && indx<15)
            if($(this).find('select').val()==0)    
        section1=true;
      
   
   if(indx>=11 && indx<15)
            if($(this).find('select').val()==0)
        section2=true;
      
   

  if(section1==true)
    $("table tr").eq(5).find("select").attr('disabled','disabled');
  else
    $("table tr").eq(5).find("select").removeAttr('disabled');
  
  if(section2==true)
    $("table tr").eq(10).find("select").attr('disabled','disabled');
  else
    $("table tr").eq(10).find("select").removeAttr('disabled');
  
  indx++;
 );
 //new code ends here

  id = $(this).attr("row_id");
  val = $(this).val();
  alert("ID:" + id + " Value:" +val);

 );

fiddle link

【讨论】：

您应该使用比依赖.eq(5) 更好的选择器，因为这会阻止您调整布局。例如，当有人指出您不应该使用这样的表（OP 代码）并且您更改它时，代码就会停止工作 - 它不应该停止工作。

是的，你是对的，但我认为根据他提供的信息，这是最好的解决方案，可能有很多最好的解决方案，但对于表格布局等其他事情可能会更改或分配 ID /classes 到目标元素等。

【参考方案4】：

用这个替换你现有的 javascript/JQuery 代码：

$("select").change(function() 
    var fifthFlag = 0,
        tenthFlag = 0,
        fifthSelectElement = "select[row_id='5']",
        tenthSelectElement = "select[row_id='10']";

    $("select").each(function()
        var id = $(this).attr("row_id"),
            val = $(this).val();

        if(val > 0)
            if(id >= 6 && id <= 10) fifthFlag = 1; 
            else if(id >= 11)tenthFlag = 1;
         
    );

    if(tenthFlag == 1 && fifthFlag == 1)
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).attr("disabled","disabled");
     else if(tenthFlag == 1 && fifthFlag == 0) 
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).attr("disabled","disabled");
     else if (tenthFlag == 0 && fifthFlag == 1)
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).removeAttr("disabled");
     else 
        $(fifthSelectElement).removeAttr("disabled");
        $(tenthSelectElement).removeAttr("disabled");
    
);

【讨论】：

这有效，但当其他行之一设置回 0 时，不会重新启用第 5 行或第 10 行。

为了满足您的要求，我已经更新了我的代码。请尝试使用这个新代码。希望这能帮助您满足您的要求。