隐藏函数 other 中的复选框，并禁用所有元素以禁用复选框

hide a checkbox in function another and disabled all elements to the checkbox disabled

本文关键字：复选框 元素 other 函数 隐藏      更新时间：2023-09-26
<script type="text/javascript">
function CheckBox(checkerbox, div) {
  if (checkerbox.checked) {
    document.getElementById(div, Urbanoo).style.display = "block"
  } else {
    document.getElementById(div, Rurall).style.display = "none"
    $("#Rurall").find("*").prop("disabled", true);
  }
}
function CheckBox1(checkerbox1, div) {
  if (checkerbox1.checked) {
    document.getElementById(div, Rurall).style.display = "block"
  } else {
    document.getElementById(div, Urbanoo).style.display = "none"
    $("#Urbanoo").find("*").prop("disabled", true);
  }
}
</script>

如何在功能另一个中隐藏复选框并禁用所有元素以禁用复选框？

<input name="Rural" type="checkbox" onclick="CheckBox1(this,'Rurall');" />
<input name="Urbano" type="checkbox" onclick="CheckBox(this,'Urbanoo');" />  Urbanoo </center>
<div id="Urbanoo" style="display:none" >
    <g:render template="../DomUrbano/form"/>
</div>

问题是当我打开一个复选框而不是另一个框时，没有禁用

<div id="Rurall" style="display:none">
    </br>
    <g:render template="../DomRural/form"/>
</div>
我想

我明白你在尝试什么，但坦率地说，它不太清楚。

所以我认为你想要的是;

  1. 如果我选中一个复选框，则隐藏其他复选框
  2. 如果我取消选中一个框，请再次显示另一个框
  3. 如果我选中一个框，则显示"合作伙伴"区域
  4. 如果我选中一个框，则禁用其他非合作伙伴区域输入
我修改了一些标记以

使其更容易，并添加了一些额外的标记以清楚地显示正在发生的事情。 我还在输入中添加了一个合作伙伴的数据元素，这样我们就可以使这一切变得更简单，并且只有一个功能;现在通过事件处理程序调用，而不是使用标记中的内联代码调用。

修订后的标记：

<span class="myinputs"><input class="mycheck" name="Rural" type="checkbox" data-partner="#Rurall" /> Rurall</span>
<span class="myinputs"><input class="mycheck" name="Urbano" type="checkbox" data-partner="#Urbanoo" /> Urbanoo</span>
<div id="Urbanoo" class="hidden others">the Urbannoo
  <g:render template="../DomUrbano/form" />
  <input type="textbox"/>
</div>
<div id="Rurall" class="hidden others">the Rurall
  <g:render template="../DomRural/form" />
  <input type="textbox"/>
</div>

法典：

$('.mycheck').on('change', function() {
  var amIChecked = $(this)[0].checked;
  $(this).parent().siblings('.myinputs').toggle(!amIChecked);
  var pt = $(this).data('partner');// get the partner selector
  $(pt).toggle(amIChecked);// show the partner in the others list
  //do the enable in the partner
  $('.others').filter(pt).toggle(amIChecked).find("*").prop("disabled", !amIChecked);
  //do the disable in the othes list not the partner
  $('.others').not(pt).find("*").prop("disabled", amIChecked);
});
在这里玩一

玩：https://jsfiddle.net/MarkSchultheiss/cLyb103x/1/

相关文章：