复选框后如何禁用div

debugcn 发表于 Dev

娜维拉·普拉萨德

大家好，我是网页设计的新手。请帮助我。我有两个HTML页面。在第一个中包含两个复选框，第二个包含两个div，一个是左侧，另一个是右侧。现在我想在第一页中选中一个复选框，然后另一个复选框自动禁用。现在第二页一个div自动进入禁用模式，意味着该div上的任何功能都不起作用。我的意思是如果首先选中LHS复选框页，因此LHS div仅在第二页中起作用。

有没有可能？

我正在使用HTML，bootstrap和jquery。

诺里哈兹梅（Norlihazmey Ghazali）

如果您可以共享您的相关代码可能会更好，在这里我举例说明，例如：

假设这是我们的HTML代码：

<!-- first page -->
  <input type="checkbox" class="myCheckbox" data-target="firstDiv" />First
  <br/>
  <input type="checkbox" class="myCheckbox" data-target="secondDiv" />Second
  <hr/>
<!-- Second page -->
  <div id="firstDiv" class="myDiv">HEllo 1st DIV</div>
  <div id="secondDiv" class="myDiv">HEllo 2nd DIV</div>

这是JS代码：

$(document).on('click', '.myCheckbox', function () {
  var target = $(this).data('target');    
  if ($(this).is(':checked')) $('#' + target).addClass('disabled');
  else $('#' + target).removeClass('disabled');
});

另外，禁用类的CSS代码：

.myDiv {
  padding:5px;
  border:1px solid black;
  background-color:blue;
  color:white;
  margin:2px;
}
.disabled {
  background-color:grey;
  color : #C0C0C0;
  opacity : 0.1;
}

更新的演示-禁用了div上的所有功能（主要是事件监听器）

我data-target在复选框本身上定义了属性，以指定div与匹配的目标ID。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。