Question

在这段代码中，我正在使用类disableDivCheckbox检查chekbox，代码正在使用类disableDiv禁用所有div内容。但是，如果我将此组合应用于另一个复选框和另一个div，则无法正常工作。所以我想找到最近的div与类disableDiv并禁用该div。我正在使用disabale *因为我想要取消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

试试这个，

$(".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类的所有内容。

试一试，这样可行。

Answer 2

您可以尝试这种方法：

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

<强>示例：

＆＃13;

// 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)
}

＆＃13;

<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>

＆＃13;

指针

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

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

这将简化导航部分。无论您使用何种结构，都要保持标准化。这将保持你的JS清洁。

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

2 个答案:

指针