隐藏另一个函数中的复选框,并禁用所有元素到禁用的复选框

时间:2016-01-24 17:04:18

标签: javascript jquery

<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 个答案:

答案 0 :(得分:0)

我想我知道你在尝试什么,但坦率地说,这不是很清楚。

所以我认为你想要的是;

  1. 如果我选中一个
  2. ,请隐藏其他复选框
  3. 如果我取消选中一个框,再次显示另一个
  4. 如果我选中一个方框,则显示“合作伙伴”区域
  5. 如果我选中一个框
  6. ,请禁用其他NOT合作伙伴区域输入

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

    修订标记:

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