使用类 disableDiv 查找最近的 div 并禁用其所有内容

Question

在这段代码中，我正在检查带有类 disableDivCheckbox 的复选框，并且该代码正在禁用所有带有类 disableDiv 的 div 内容。但是，如果我将此组合应用于另一个复选框和另一个 div，则无法正常工作。所以我想找到最接近的 div 类 disableDiv 并只禁用那个 div。我正在使用 disbale * 因为我想禁用 div 及其内容。

$(".disableDivCheckbox").click(function () {
            if ($(this).is(":checked")) {
               $('.disableDiv *').removeAttr("disabled");
            }
            else {
                $('.disableDiv *').val('').prop('checked', false).attr("disabled", "disabled");
            }
        });

小提琴：https://jsfiddle.net/8c0x1pho/

Answer 1

你可以试试这个方法：

• 获取检查状态并将其保存在变量中
• 使用this 导航到所有必要的元素。这将使您的代码更加模块化。
• 尽量不要使用* 选择器。使用更具体的选择器，因为这将指定您正在操作的元素类型并使您的代码更具可重用性。
• 您可以将disabled 的值设置为true 或false，而不是attr 和removeAttr。你可以使用!$(..).is(":checked")

示例：

// Only call functions. DON'T declare any functions in ready.
$(document).ready(function() {
  // Have a common function. 
  // If size grows, this can be exported to its own file
  registerEvents();
  
  // Initialise on load states.
  updateUIStates("#addBusinessObjectivesCheckbox")
});

function registerEvents() {
  $(".disableDivCheckbox").click(function() {
    updateUIStates(this)
  })
}

function updateUIStates(el) {
  var isNotChecked = !$(el).is(":checked");
  var inputs = $(el)
    .parents(".checkbox")
    .siblings(".disableDiv")
    .find('input');
  inputs.attr("disabled", isNotChecked)
  isNotChecked && inputs.val('').prop('checked', false)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset id="AddBusinessObjectivesFieldset" class="">
  <legend>
    Add business objectives
  </legend>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="addBusinessObjectivesCheckbox" name="addBusinessObjectivesCheckbox" class="disableDivCheckbox" id="addBusinessObjectivesCheckbox"> Add business objectives
    </label>
  </div>
  <div style="border: 2px solid;margin-bottom: 5px;border-color: gray;padding: 0px 0px 0px 5px;margin-top: 5px;margin-right: 10px;" class="disableDiv">
    <div class="form-inline" style="margin-top:5px;margin-bottom:5px;">
      <table>
        <tr>
          <td>
            <div class="radio">
              <label>
                <input type="radio" name="AddBusinessObjectives" id="" value="0" class=""> Fixed N
              </label>
            </div>
          </td>
          <td>
            <div class="radio">
              <label>
                <input type="radio" name="AddBusinessObjectives" id="" value="1" class=""> Random upto N
              </label>
              <input type="text" placeholder="Enter N" id="indexTextboxAddBusinessObjectives" name="indexTextboxAddBusinessObjectives" style="width:70px" class="" />
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</fieldset>

指针

• $(document).ready() 更像是init 函数。尝试调用函数而不是在其中定义。这将更容易理解，因为它会描述一个流程。
• 使用纯函数然后调用。像onChange，你可以调用几个函数：updateUIStates()，postDataToServer()，processResponse()，otherTodos()。这可能看起来有点矫枉过正，但从长远来看，这会有所帮助。
• 在您的标记中创建一个树形结构。

<div class="container">
  <div class="checkbox-container">...</div>
  <div class="input-containers">...</div>
</div>

这将简化导航部分。无论您使用什么结构，都要保持标准化。这将使您的 JS 保持干净。

Answer 2

试试这个，

$(".disableDivCheckbox").click(function () {
    if ($(this).is(":checked")) {
        $(this).closest('.disableDiv *').removeAttr("disabled");
    } else {
        $(this).closest('.disableDiv *').val('').prop('checked', false).attr("disabled", "disabled");
    }
});

这意味着，您将仅禁用 disableDivCheckbox 所属的 disableDiv 类的所有内容。

试一试，会成功的。