Как выводить элемент только у одного чекбокса?

312

30 ноября 2017, 00:40

Нужно, чтобы при нажатии на чекбокс все остальные кнопки убирались, а кнопка "применить" должна быть только у того чекбокса, который нажат последним. Т.е. кнопка должна быть одна.

Чекбоксы должны оставаться выделены.

$(document).ready(function () { 
  $('.check-list :checkbox').on('change', function() { 
    var filterId = $(this).find('input:checked').context.id; 
		$('.' + filterId + '').show(300); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="check-list "> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_0" value="13794"> 
    <label for="idchkk_2_1_0"> 
      <i></i> 
      BARS SILVER 
    </label> 
    <span style="display: none;" class="idchkk_2_1_0"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_1" value="13647"> 
    <label for="idchkk_2_1_1"> 
      <i></i> 
      BLAK HORSE 
    </label> 
    <span style="display: none;" class="idchkk_2_1_1"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_2" value="13659"> 
    <label for="idchkk_2_1_2"> 
      <i></i> 
      BOSCH 
    </label> 
    <span style="display: none;" class="idchkk_2_1_2"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li>   
</ul>

Answer 1

Зачем 3 кнопки?

Можно сделать и одну и двигать её по мере надобности. Вот мой код: https://jsfiddle.net/j1wxwjfb/

html код:

<button type="submit" id="button" style="display: none; position: absolute;">Применить</button>
<ul class="check-list">
  <li>
    <input type="checkbox" id="idchkk_2_1_0" value="13794">
    <label for="idchkk_2_1_0">BARS SILVER</label>
  </li>
  <li>
    <input type="checkbox" id="idchkk_2_1_1" value="13647">
    <label for="idchkk_2_1_1">BLAK HORSE</label>
  </li>
  <li>
    <input type="checkbox" id="idchkk_2_1_2" value="13659">
    <label for="idchkk_2_1_2">BOSCH</label>
  </li>  
</ul>

JQuery код:

$('.check-list :checkbox').on('change', function(e) {
    // определить последний выбранный элемент
    var lastElement = undefined;
    $(".check-list input[type='checkbox']:checked").each(function(index, element){
        lastElement = element;
    });
    if (lastElement == undefined)
        $('#button').hide(300);
    else
    {
        var pos = $(lastElement).next().position();
        var width = $(lastElement).next().width();
        $('#button').hide(300, function(){
            $('#button').css({left: pos.left + width + 15, top: pos.top,}).show(300);
        });
    }
});

Ну позицию можно чуть скорректировать чтобы по центру выдавалась

Answer 2

JS тут не требуется: https://jsfiddle.net/hd8d2d0e/1/

button {
  transition: opacity 600ms cubic-bezier(0.19, 1, 0.22, 1);;
  opacity: 0;
}
.check-list input[type=checkbox]:checked + label + button    {
  opacity: 1;
}

Answer 3

Вот так вроде работает :

$(document).ready(function() { 
  var _history = []; 
 
  $('.check-list :checkbox').on('change', function() { 
    var c = $(this).prop('checked'); 
    var filterId = $(this).find('input:checked').context.id; 
 
    if (!c) { 
      delHistory(filterId); 
      if ($('.' + filterId + '').css('display') != 'none') { 
        $('.' + _history[0] + '').show(300); 
      } 
      $('.' + filterId + '').css('display', 'none'); 
    } else { 
      _history.unshift(filterId); 
      $('.check-list span').css('display', 'none'); 
      $('.' + filterId + '').show(300); 
    } 
  }); 
 
  function delHistory(elem) { 
    var index = _history.indexOf(elem); 
    if (index > -1) { 
      _history.splice(index, 1); 
    } 
  }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="check-list "> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_0" value="13794"> 
    <label for="idchkk_2_1_0"> 
      <i></i> 
      BARS SILVER 
    </label> 
    <span style="display: none;" class="idchkk_2_1_0"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_1" value="13647"> 
    <label for="idchkk_2_1_1"> 
      <i></i> 
      BLAK HORSE 
    </label> 
    <span style="display: none;" class="idchkk_2_1_1"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li> 
  <li> 
    <input type="checkbox" id="idchkk_2_1_2" value="13659"> 
    <label for="idchkk_2_1_2"> 
      <i></i> 
      BOSCH 
    </label> 
    <span style="display: none;" class="idchkk_2_1_2"><button type="submit" class="ctf-b-btn-aply">Применить</button></span> 
  </li> 
</ul>