Question

我有两个表单字段，一个包含选择选项，另一个包含复选框。我想在选中/选中时显示按钮。如何编写代码，以便在第一个表单组中选择一个选项并在按钮显示的第二个表单组中选择至少一个复选框时。任何帮助将不胜感激......

我的HTML是：

<div class="row fourth-row hide"> <!--HIDE THIS-->

       <div class="col-xs-4 col-lg-3">
         <form role="form">
           <fieldset class="usergroup-2 usergroup">
             <div class="form-group">
              <select class="form-control">
                <option class="activate">Usergroup</option>
                <option class="activate-3" value="usergroup">Moderator</option>
                <option class="activate-3" value="usergroup">Registered user</option>
                <option class="activate-3" value="usergroup">Super user</option>
              </select>
            </div> <!--/.form-group-->
          </fieldset>
        </form>
      </div> <!--/.col-xs-4--> 

      <div class="col-xs-4 col-lg-3">
        <div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div">
         <button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown" ><!--DISABLE THIS-->
           Select one or more options <span class="caret"></span>
         </button>
         <ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3">
           <li class="option">
             <a class="checkall show-cross-2" href="#">Check all</a>
             <a class="uncheckall">Uncheck all</a>
           </li>
           <li><strong>Group 1</strong></li>
           <li class="option">
             <div class="checkbox">
              <label>
               <input type="checkbox" class="only-this show-cross-2">Option #1 for group 1
             </label>
           </div>
         </li>
         <li class="option">
           <div class="checkbox">
            <label>
             <input type="checkbox" class="only-this show-cross-2">Option #2 for group 1
           </label>
         </div>
       </li>
       <li class="option">
         <div class="checkbox">
          <label>
           <input type="checkbox" class="only-this show-cross-2">Option #3 for group 1
         </label>
       </div>
     </li>
     <li><strong>Group 2</strong></li>
     <li class="option">
       <div class="checkbox">
        <label>
         <input type="checkbox" class="only-this show-cross-2">Forum
       </label>
     </div>
   </li>
   <li class="option">
     <div class="checkbox">
      <label>
       <input type="checkbox" class="only-this show-cross-2">Ipsum
     </label>
   </div>
 </li>
 <li class="option">
   <div class="checkbox">
    <label>
     <input type="checkbox" class="only-this show-cross-2">Dorol
   </label>
 </div>
</li>
</ul>
</div> <!--/.btn-group-->
</div> <!--/.col-xs-6-->

<div class="col-xs-1">
 <button type="button" class="btn btn-danger btn-sm hidden-cross-2 hide">X</button>
</div>

我已经尝试过JQUERY：

 $(".dropdown-menu .only-this").change(function() {
    if ($('.usergroup option:selected').is(':checked')) && ('.dropdown-menu input[type="checkbox"]').is(":checked"))  {
        $(".btn-danger").show();
    }
});

http://jsfiddle.net/ginalolli/dsfe307m/

Answer 1

如果您更改了选择，以便您的第一个选项没有值：

<option class="activate" value="">Usergroup</option>

您可以使用以下jQuery：

var select = $('.form-control'),
    checkboxes = $('input[type="checkbox"]');

select.add(checkboxes).on('change', function() {
    if (select.val() != '' && checkboxes.filter(":checked").length > 0) {
        $(".btn-danger").show();
    } else {
        $(".btn-danger").hide();
    }
});

Example

我不确定.dropdown-menu .only-this是什么，所以我将事件绑定到选择和复选框的更改

选中选项和复选框时显示按钮

1 个答案: