需要在动态表中控制表单输入

Question

我正在使用 PHP、Jquery 和 BootStrap。

我正在生成一个表单，以便用户可以提供他们的可用性以供上游流程考虑。

用户单击一个按钮，网站就会添加一个新行，要求用户输入。有一个名为“全天”的复选框，我也想锁定和更新开始和结束输入区域的值。

我只对第一行有效。如果我生成三行输入并选中第 3 行中的复选框，则当我希望更改与选中的复选框同一行中的字段时，第一行的输入字段会被修改。

我认为我需要缩小行表的唯一 ID，但我不知道该怎么做。

var s1 = 0;

$(document).ready(function() {

  $(".add-single").click(function() {
    $("#singleAvailTable").show();
    var markup = '<tr id="' + s1 + '"><td class="text-center w-20"><input type="date" class="" name="inputSingleDate[]" id="inputSingleDate[]" value="<?php echo $AvailDatedate; ?>" min="<?php echo $AvailDatedate; ?>" max="<?php echo $AvailOneYear; ?>" required></td><td class="text-center w-20"><input type="hidden" name="checkAllDay[]" id="checkAllDay[]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value; AllDay(' + s1 + ')" id="checkAllDaybuton"></td><td class="text-center w-20"><select id="inputStartTime[]" name="inputStartTime[]" class="form-select form-select-sm"><option selected value="08:00">8:00 AM</option><option value="08:15">8:15 AM</option></select></td><td class="text-center w-20"><select id="inputEndTime[]" name="inputEndTime[]" class="form-select form-select-sm"><option value="08:00">8:00 AM</option><option value="08:15">8:15 AM</option><option value="08:30">8:30 AM</option><option value="12:00">12:00 PM</option><option value="20:00">8:00 PM</option></select></td><td class="text-center w-20"><input type="text" class="" id="inputNote[]" name="inputNote[]" pattern="[a-zA-Z0-9.- ]+"></td><td class="text-center w-20"><button type="button" class="btn btn-danger btn-sm" id="RowDel">Delete</button></td></tr>';
    $('#singleAvailTable').find('tbody').append(markup);
    s1++;
    console.log(s1);
  });

  // Find and remove selected table rows
  $("#singleAvailTable").on('click', '#RowDel', function() {
    $(this).parent().parent().remove();

  });


});

function AllDay(x) {


  // console.log("Row index is: " + x);
  // Find Allday checkbox
  if (document.getElementById('inputStartTime[]').disabled == false) {
    document.getElementById("inputEndTime[]").value = "20:00";
    document.getElementById("inputEndTime[]").disabled = true;
    document.getElementById("inputStartTime[]").value = "08:00";
    document.getElementById("inputStartTime[]").disabled = true;
    console.log('disabled row' + x);
    return;
  }
  if (document.getElementById('inputEndTime[]').disabled == true) {
    document.getElementById("inputEndTime[]").value = "12:00";
    document.getElementById("inputEndTime[]").disabled = false;
    document.getElementById("inputStartTime[]").value = "08:00";
    document.getElementById("inputStartTime[]").disabled = false;
    console.log('enabled row' + x);
    return;
  }
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p class="text-center">Use a button below to add an availability entry.</p>
<form>


  <table class="table table-sm" id="singleAvailTable">
    <thead>
      <tr>
        <th scope="col" class="text-center w-20">Date</th>
        <th scope="col" class="text-center w-20">All Day</th>
        <th scope="col" class="text-center w-20">Start Time</th>
        <th scope="col" class="text-center w-20">End Time</th>
        <th scope="col" class="text-center w-20">Availability Note</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</form>
<p class="text-center">
  <button type="button" class="btn btn-primary add-single" id="addSingleBtn">Add Single Day Availability</button>
</p>

jsfiddle 片段：https://jsfiddle.net/orddie/0mf6qLxk/10/。

Answer 1

更改您的 ID

• 全天复选框为 id="checkAllDaybuton'+s1+'
• 开始时间为 id="inputStartTime'+s1+'"
• 结束时间为 id="inputEndTime'+s1+'"

将复选框的 onclick 函数更改为

function AllDay(x) {

    var checkbox = document.getElementById('checkAllDaybuton' + x );
    var inputStartTime = document.getElementById('inputStartTime' + x );
    var inputEndTime = document.getElementById('inputEndTime' + x );

    inputStartTime.disabled = checkbox.checked;
    inputEndTime.disabled = checkbox.checked;
}

• 这里我们将inputStartTime和inputEndTime的disabled属性设置为复选框的checked属性的值。
• 如果选中该复选框，这将禁用相关时间下拉列表；如果未选中该复选框，则将启用它。

Answer 2

通过将选择逻辑更改为类，我得到了我需要的东西，而不是 ID 代码在这里 https://jsfiddle.net/orddie/0mf6qLxk/16/

大部分更新都是针对此部分完成的

function AllDay(x) {
  // console.log("Row index is: " + x);
  // Find Allday checkbox
                
  if (document.getElementsByClassName("inputStartTime")[x].disabled == false) {
    document.getElementsByClassName("inputEndTime")[x].value = "20:00"; 
    document.getElementsByClassName("inputEndTime")[x].disabled = true;
    document.getElementsByClassName("inputStartTime")[x].value = "08:00"; 
    document.getElementsByClassName("inputStartTime")[x].disabled = true;
    console.log('disabled row'+x);
    return;
  }
  if (document.getElementsByClassName("inputEndTime")[x].disabled == true) {
    document.getElementsByClassName("inputEndTime")[x].value = "12:00"; 
    document.getElementsByClassName("inputEndTime")[x].disabled = false;
    document.getElementsByClassName("inputStartTime")[x].value = "08:00"; 
    document.getElementsByClassName("inputStartTime")[x].disabled = false;
    console.log('enabled row'+x);
    return;
  }                
}
            
$("#singleAvailTable").on('click', '#checkAllDaybuton', function() {
  var test = $(this).show;
  // console.log(test);
});