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

Question

我有一个有 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();
 });

Answer 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 元素完成这项工作。

Answer 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);

Answer 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

Answer 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");
    }
});