Код JQuery для отображения/скрытия элементов формы

У меня есть форма, заполненная тремя строками флажков. Мне бы хотелось, чтобы только две две строки были доступны, если и только если третий флажок установлен только в первой строке. На данный момент я все три строки показываю все время, поэтому очень возможно, что я неправильно звоню в JQuery.Код JQuery для отображения/скрытия элементов формы

Также было бы неплохо, если бы форма автоматически масштабировалась для учета потери/усиления строк при скрытии/показе. Это происходит автоматически (я использую Bootstrap, если это имеет значение).

Вот код:

JQuery

<body> 
    <script> 
    $(function showHide() { 
     $("name=checkboxes").click(function() { 
      if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) { 
       $('#group2').hide(); 
       $('#group3').hide(); 
      } 
     }); 
    }); 
    </script> 
</body>

HTML

 <form class="form-horizontal"> 
     <fieldset> 
      <!-- Form Name --> 
      <legend>Select Entities to Search For</legend> 
      <!-- Multiple Checkboxes (inline) --> 
      <div class="form-group" id="group1"> 
      <label class="col-md-4 control-label" for="checkboxes">Table(s)</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxes-0"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-farms" value="1"> 
        Farms 
       </label> 
       <label class="checkbox-inline" for="checkboxes-1"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-fields" value="3"> 
        Fields 
       </label> 
       <label class="checkbox-inline" for="checkboxes-2"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-cropzones" value="5"> 
        Cropzones 
       </label> 
      </div> 
      </div> 
      <!-- Multiple Radios (inline) --> 
      <div class="form-group" id="group2"> 
      <label class="col-md-4 control-label" for="checkboxes">Cropyear</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxess-0"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-cropyear" value="2014"> 
        2014 
       </label> 
      </div> 
      </div> 
      <!-- Multiple Checkboxes (inline) --> 
      <div class="form-group" id="group3"> 
      <label class="col-md-4 control-label" for="checkboxes">Crop</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxes-0"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-corn" value="100"> 
        Corn 
       </label> 
       <label class="checkbox-inline" for="checkboxes-1"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-soybeans" value="200"> 
        Soybeans 
       </label> 
      </div> 
      </div> 
     </fieldset> 
     </form>

источник

2013-11-22 Alex Chumbley

Не могли бы вы сделать http://jsbin.com демо? – SaidbakR

Функция showHide() .. у вас есть nt, называемый этой функцией в любом месте – Bhadra

$ ("name = checkboxes") whatttt ??????????? : D –

$(function() { 
    $('[name="checkboxes"]').on('change', function() { 
     var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked'); 
     $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked)); 
    }).trigger('change'); 
});

FIDDLE

источник

2013-11-22 17:55:11 adeneo

Извините, если он был неясным, но две другие строки не должны быть доступны, если третий флажок И любой из двух других отмечены. –

@AlexChumbley - то, наверное, мне придется его редактировать! – adeneo

Замечательное редактирование! –

-1

Вам нужно, чтобы скрыть их первоначально - предложил бы делать это в готовом функции JQuery документе например:

$(document).ready(function() { 
// Stuff to do as soon as the DOM is ready; 
});

И я бы привязал событие «изменения» к флажку, который контролирует показ дополнительных полей.

Сообщите мне, если вам нужен пример, собиравшийся на jsfiddle или аналогичном.

источник

2013-11-22 17:50:54 steve

Try:

$(document).ready(function(){ 
    $("input[name='checkboxes']").change(function() { 
     if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) { 
      $('#group2,#group3').show(); 
     } else { 
      $('#group2,#group3').hide(); 
     } 
    }); 
});

Fiddle here.

источник

2013-11-22 17:56:31 Hiral

Работает отлично в скрипке, но не в самом html, я вызываю функцию неправильно, просто придерживая свой ответ в теге '' '? btw, +1 –

спасибо :) напишите в разделе 'ready'. Как '$ (document) .ready (function() {$ (" input [name = 'checkboxes'] "). Change ........});' – Hiral

Код JQuery для отображения/скрытия элементов формы

ответ

Смежные вопросы