Question

我有一些复选框和输入字段通过PHP动态生成，它们是

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Description</th>
      <th>Status</th>
      <th>Comment</th>
    </tr>
  </thead>
<tbody>

PHP：

foreach ($checks as $m => $check) {
  $textinbox ='<input type="text" class="message_input"/>' ;
  if ($truck->truck_category == 2) {
    $checkbox .='<input type="checkbox" value="'.$check->id.'"/>' ;
  }else{
    $checkbox .='<input type="checkbox" value="'.$check->id.'er"/>' ;   
  }

 ......other php statements here

echo "<tr  id='" . $m . "'>";
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinbox."</td>";
echo "</tr>";

我也有一个按钮

<button class="btn btn-success" id="approve_btn">Approve</button>

我想在以下情况下禁用该按钮：

未选中复选框且$textbox(textinput)为空

我想在以下情况下启用按钮：

选中复选框或
取消选中该复选框，$textbox(textinput)不为空

对于DOM中的所有复选框和输入框

我试过这个但是无法工作（它从上到下工作 - 即如果我输入所有输入字段按钮已启用但如果我删除底部的较低的按钮仍然启用：

即使删除了较低项目的输入字段

，我希望它能够正常工作

$('input[type=text]').on("change", function(){
//check other input fields to ensure that the ones with unchecked checkboxes have input values
var uncheckedboses = $(":checkbox").not(":checked");
uncheckedboses.each(function() {
  if($(this).closest('tr').find('input[type=text]').val()=="" >0){

      $("#approve_btn").prop("disabled", "disabled");
  }
  else {
      $("#approve_btn").removeAttr("disabled"); 
  }
  });  
    console.log(uncheckedboses);  

});

我希望实现的逻辑是：

$('input[type=text]').on("change", function () {

// check other input fields to ensure that the ones with
// unchecked checkboxes have input values 

if (/*above comment is true*/) {
  //disable the btn
} else { 
  //enable the btn
}

Answer 1

默认情况下禁用该按钮并添加两个事件，一个复选框检查事件和其他文本框onchange事件。在这些事件中添加你的逻辑并完成。

// Event for checkboxes
$(".someCheckBox").on('change', function() {
  if(this.checked) {
    // You custom logic will come here
    $('#someButton').attr('disabled', false);
  } else {
    $("#someButton").attr('disabled', true);
  }
});

// Event for textBoxes
$(".someTextBox").on('change keyup paste', function() {
  if($(this).val()) {
    $('#someButton').attr('disabled', false);
  } else {
    $("#someButton").attr('disabled', true);
  }
});

Answer 2

要接近你想要的逻辑......

$('input[type=text]').on("change", function(){

    //check other input fields to ensure that the ones with unchecked checkboxes have input values
    var uncheckedboses = $(":checkbox").not(":checked");
    var flag = false;

    uncheckedboses.each(function() {
        if( $(this).closest('tr').find('input[type=text]').val()=="" ){
            flag = true;
        }
    });

    // If ONE unchecked checkbox is found with an input empty...
    if ( flag ){
        $("#approve_btn").prop("disabled", true);
    }else{
        $("#approve_btn").prop("disabled", false);
    }

    console.log(flag);
    console.log(uncheckedboses);  
});

你的逻辑还可以......
由于您只想验证未选中相关复选框的输入...并验证它们全部。

但是你必须使用“标志”，因为你运行循环就像一个由邮递员填写的邮箱。 ;）

如果你没有，最后一个未选中的复选框输入已填充，即使有一些（循环中的前一个）输入为空，该按钮也会被启用。

如果找到一个未选中的复选框且输入为空，则该标志为true。然后，禁用该按钮。

正如我在1小时前的评论中所说的那样，正确使用.prop("disabled", [true/false])正在解决您最明显的问题。

也要看看你的状况。

if($(this).closest('tr').find('input[type=text]').val()=="" >0){

应该是：

if( $(this).closest('tr').find('input[type=text]').val()=="" ){

如果未选中复选框且输入字段为空，则在jquery中禁用按钮

2 个答案: