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

lymnna71 于 2023-03-29 发布在 jQuery

关注(0)|答案(2)|浏览(174)

我使用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/ .

jquery

来源：https://stackoverflow.com/questions/75812423/need-to-control-form-inputs-within-a-dymanic-table

2条答案

按热度按时间

r1wp621o1#

更改您的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属性设置为checkbox的checked属性的值。
如果复选框被选中，这将禁用相关的时间下拉列表，如果未选中，则将启用它。

赞(0）回复(0）举报 2023-03-29

3duebb1j2#

我通过将选择逻辑更改为class而不是ID code is here 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);
});

赞(0）回复(0）举报 2023-03-29

我来回答

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

2条答案

相关问题

热门标签

最新问答