Question

如何将验证应用于同一行的两个或多个值？

我需要确保用户没有选择相应的复选框而没有填写PUID输入，反之亦然。

在这种情况下，如果他点击“点击我”按钮，我想显示错误。

编辑：使用disabled属性没有用，因为用户仍然可以选中复选框并将输入留空的的jsfiddle：

HTML：

<div class="table-responsive">
  <table class="table table-hover table-striped mytable" id="table">
    <thead class="thead-light">
      <tr>

        <th>#</th>
        <th>Product</th>
        <th>App</th>
        <th>PUID</th>
        <th>ID</th>
      </tr>
    </thead>
    <tbody>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod1</td>
        <td>AppName1</td>
        <td>
          <input class="form-control" id="usr" type="text" />
        </td>
        <td class="prAppId">a0L2000000Rpc1UEAR</td>

      </tr>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod2</td>
        <td>AppName2</td>
        <td>
          <input class="form-control" id="usr" type="text" />
        </td>
        <td class="prAppId">a0L2000000Rpc1bEAB</td>

      </tr>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod3</td>
        <td>AppName3</td>
        <td>
          <input class="form-control" id="usr" type="text" />
        </td>
        <td class="prAppId">a0L250000040FhzEAE</td>

      </tr>
    </tbody>
  </table>
  <button onclick="getTableRowData()">Click ME</button>
</div>

Answer 1

$(document).on("change",".case",function(){
    var td = $(this)
    if($(td). prop("checked") == true){
        $(this).parent().nextAll().eq(2).find("input").prop( "disabled",false )
    }else{
        $(this).parent().nextAll().eq(2).find("input").prop( "disabled" , true)
    }

});

和输入字段的html add disable，如

    <div class="table-responsive">
     <table class="table table-hover table-striped mytable" id="table">
    <thead class="thead-light">
      <tr>

        <th>#</th>
        <th>Product</th>
        <th>App</th>
        <th>PUID</th>
        <th>ID</th>
      </tr>
    </thead>
    <tbody>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod1</td>
        <td>AppName1</td>
        <td>
          <input class="form-control" disabled id="usr" type="text" />
        </td>
        <td class="prAppId">a0L2000000Rpc1UEAR</td>

      </tr>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod2</td>
        <td>AppName2</td>
        <td>
          <input class="form-control" disabled id="usr" type="text" />
        </td>
        <td class="prAppId">a0L2000000Rpc1bEAB</td>

      </tr>

      <tr class="row">
        <td><input class="case" name="case[]" type="checkbox" /></td>
        <td>Prod3</td>
        <td>AppName3</td>
        <td>
          <input class="form-control" disabled id="usr" type="text" />
        </td>
        <td class="prAppId">a0L250000040FhzEAE</td>

      </tr>
    </tbody>
  </table>
  <button onclick="getTableRowData()">Click ME</button>
</div>

js fiddle

验证同一表行上的两个或多个值

1 个答案: