在两个html字段之间形成关系

Form a relation between two html fields

本文关键字：之间 字段 关系 html 两个      更新时间：2023-09-26

我有一个复选框，选中后，用户可以使用多个其他字段输入数据。

现在我有很多这样的事件，并且处理每个事件的检查事件变得越来越困难，所以我创建了一个onclick事件来侦听类的检查事件。

<table>
  <tr>
    <td>
      <label class="app-form-label">
        <input type="checkbox" name="Sem1CourseOffer" id="chkSem1CourseOffer" class="disableEnableField" value="Semester 1">Semester 1</label>
    </td>
    <td>
      <div style="float:left">
        <label style="display:block">
          <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable1">Face to Face</label>
        <label style="display:block">
          <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Print" class="enableDisable1">Print</label>
        <label style="display:block">
          <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable1">Blended</label>
        <label style="display:block">
          <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Online" class="enableDisable1">Online</label>
        <label style="display:block">
          <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Other" class="enableDisable1">Other</label>
      </div>
      <textarea name="Sem1CourseOfferModeComment" id="txtSem1CourseOfferModeComment" disabled="disabled" class="control-label enableDisable1" style="width: 50%; margin-left:20px; height:100%"></textarea>
    </td>
  </tr>
  <tr>
    <td>
      <label class="app-form-label">
        <input type="checkbox" name="Sem2CourseOffer" id="chkSem2CourseOffer" class="disableEnableField" value="Semester 2">Semester 2</label>
    </td>
    <td>
      <div style="float:left">
        <label style="display:block">
          <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable2">Face to Face</label>
        <label style="display:block">
          <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Print" class="enableDisable2">Print</label>
        <label style="display:block">
          <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable2">Blended</label>
        <label style="display:block">
          <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Online" class="enableDisable2">Online</label>
        <label style="display:block">
          <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Other" class="enableDisable2">Other</label>
      </div>
      <textarea name="Sem2CourseOfferModeComment" id="txtSem2CourseOfferModeComment" disabled="disabled" class="control-label enableDisable2" style="width: 50%; margin-left:20px; height:100%"></textarea>
    </td>
  </tr>
</table>

这里有两个复选框，其中包含disableEnableField类。每个复选框禁用其他元素（4个复选框，1个文本区域，所有这些都具有类enableDisable[i]）

现在我的Javascript处理点击事件的2个主要复选框

$(function () {
  $(".disableEnableField").change(function () {
    if ($(this).is(':checked')) {
      $('.enableDisable1').prop("disabled", false)
    } else {
      $('.enableDisable1').prop("disabled", true)
    }
  });
});

以下是我的设置的工作演示（功能不正确）：https://jsfiddle.net/normangr7/Lckjcr9u/1/

在演示中，如果单击semester1，正确的对应元素的disable属性就会发生更改。然而，对于semester2，它是不正确的，因为我对属性进行了硬编码。我需要一种方法让onclick获取复选框需要更改的相应元素。也许是通过元素的属性？

您可以执行以下操作：

  1. 您必须标记要触发的所有相关输入，可能使用一个不同的类
  2. 将应该触发哪个类的信息添加到复选框中
  3. 创建通用触发器函数

你已经完成了第一项。

第二个可以通过复选框中的数据属性来实现

<input type="checkbox" name="Sem2CourseOffer" data-trigger-class="enableDisable2"...

通用函数应该做一些类似的事情

$(".disableEnableField").on('click', function(event) {
    className = $(this).data('trigger-class');
    if ($(this).is(':checked')) {
        $('.' + className).prop("disabled", false)
    } else {
        $('.' + className).prop("disabled", true)
    }
}

hth

这将启用或禁用下一个单元格中的所有元素：

$(function () {
  $(".disableEnableField").change(function () {
    if($(this).is(':checked')) {
      $(this).closest('td').next('td').find('*').prop("disabled", false);
    } else {
      $(this).closest('td').next('td').find('*').prop("disabled", true);
    }
  });
});

Fiddle

相关文章：