Question

如果在UL＆gt;中找到活动类，我如何隐藏文本框？李

当我应该显示其标签和文本框时，它应该被隐藏。我试图获取所选复选框的值并隐藏它但无法到达那里。

$('ul.multiselect-container').has('li.active').css('display', 'none');

<ul class="multiselect-container dropdown-menu">
    <li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Paypal</label></a>

    </li>
    <li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Stripe</label></a>

    </li>
    <li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3">Beanstream</label></a>

    </li>
</ul>
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
<br>
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
<br>
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">

更新

很抱歉，如果问题不明确，当我点击第一个复选框，说paypal然后只有paypal标签和文本框应该出现在下面，剩下的文本框2和它的标签应该隐藏。我猜需要使用每个（）循环遍历UL标记。

这是一个小提琴。 http://jsfiddle.net/nzw7LoL0/5/

更新2

我无法将一个类添加到div调用选项和选项1，因为html是使用框架生成的。所以我需要隐藏具有类.control-group http://jsfiddle.net/d280wqr4/5/

的行

$('input:checkbox').on('change', function () { // Apply change listener to checkboxes
    if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
        $('.option' + $(this).prop('value'))find('.control-group').show();
    } else { // Otherwise, hide the relevant element
        $('.option' + $(this).prop('value')).find('.control-group')hide();
    }
});


<div class="control-group "><label for="Configuration_paypalId" class="control-label">Paypal Id</label><div class="controls"><input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1"><p class="help-block">Merchant id or email of the Paypal account</p></div></div>

    <div class="control-group "><label for="Configuration_stripeId" class="control-label">Stripe Id</label><div class="controls"><input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2"><p class="help-block">Stripe id or email of the Stripe account</p></div></div>

Answer 1

指定一个公共类，以便选择器变得简单

<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 classname">

然后

$('input.classname').toggle($('.multiselect-container li.active').length == 0);//hides input with class `classname` if `li` has `active` class
$('ul.multiselect-container').has('li.active').hide();//hides the ul if li has active class

$('.multiselect-container input:checkbox').click(function(){
  var type = $(this).data('type');
  $('.'+type).toggle(this.checked);
  $(this).closest('li').addClass('active')
});

$('.payid').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1" data-type="paypal"> Paypal</label></a></li>
  <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2" data-type="stripe"> Stripe</label></a></li>
  <li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3" data-type="bean">Beanstream</label></a></li>
</ul>
<div class="paypal payid">
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="stripe payid">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="bean payid">
  <label for="Configuration_beanId" class="control-label">Bean Id</label>
  <input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>

Answer 2

您需要对复选框应用“更改”侦听器，然后检查它们是否已选中并根据此信息显示/隐藏其他元素。您需要一个与复选框的value属性匹配的类或ID。

以下示例应该按照您的希望工作。

$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
  if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
    $('.option' + $(this).prop('value')).show();
  } else { // Otherwise, hide the relevant element
    $('.option' + $(this).prop('value')).hide();
  }
});

.option {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="1" />Paypal
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="2" />Stripe
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="3" />Beanstream
      </label>
    </a>
  </li>
</ul>
<div class="option option1"> <!-- The number refers to the value of the checkbox -->
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="option option2">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="option option3">
  <label for="Configuration_beanId" class="control-label">Bean Id</label>
  <input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>

根据更多信息进行更新

如果您无法编辑html，因为它是动态生成的，您需要根据索引进行操作。这只有在复选框的顺序与其他输入匹配时才有效，但如果它是动态生成的，那么我不明白为什么不应该这样。

$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
  var index = parseInt($(this).prop('value')) - 1; // Make the index zero based
  if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
    $('.control-group:eq(' + index + ')').show();
  } else { // Otherwise, hide the relevant element
    $('.control-group:eq(' + index + ')').hide();
  }
});

.control-group {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="1" />Paypal
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="2" />Stripe
      </label>
    </a>
  </li>
  <li>
    <a tabindex="0">
      <label class="checkbox">
        <input type="checkbox" value="3" />Beanstream
      </label>
    </a>
  </li>
</ul>
<p>------------------------------</p>
<div class="control-group">
  <label for="Configuration_paypalId" class="control-label">Paypal Id</label>
  <input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1" />
  <p class="help-block">Merchant id or email of the Paypal account</p>
</div>
<div class="control-group">
  <label for="Configuration_stripeId" class="control-label">Stripe Id</label>
  <input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2" />
  <p class="help-block">Stripe id or email of the Stripe account</p>
</div>

Answer 3

如果您能够稍微更改标记，那么您可以通过以下方式使用float.Parse(System.Text.Encoding.Default.GetString(Data, 6, 6));属性：

＆＃13;

data-*

＆＃13;

    $('.dropdown-menu :checkbox').change(function(e) {
      var target = $(this).data('target');
      $('.' + target).toggle();
    });

＆＃13;

.paypal, .stripe, .beanstream{display:none;}

＆＃13;

如果jquery列表具有类

3 个答案:

根据更多信息进行更新