Лучшие практики для элементов условной формы с уникальным идентификатором базы данных

Question

Я работаю над формой с несколькими условными полями, которые скрываются или открываются в зависимости от флажков, которые сами происходят из элементов в таблице.

Флажки выглядят так

@foreach ($media as $medium)
        <div class="col-4 col-md-auto form-check form-check-inline media-checkbox-group required">
            <input class="form-check-input media-checkboxes" type="checkbox" name="media[{{ $medium->id }}]" value="{{ $medium->id }}" id="mediumId{{ $medium->id }}">
            <label class="form-check-label" for="{{ $medium->id }}">{{ $medium->type }}</label>
        </div>
@endforeach

моя javascript функция, подобная этой

$('#mediumId3').on("change", function () {
  var x = document.getElementById("block");
  if (this.checked) {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
});

и моя html форма элемента, подобная этой

<div id="block" style="display:none;">
  <div class="form-group row">
    <label for="poemCount" class="col-md-4 col-form-label text-md-right">{{ __('Require this many poems') }}</label>

    <div class="col-md-8">

      <div class="form-check form-check-inline">
        <label class="mr-1" for="countMin">{{ __('Min:') }}</label>
        <select class="form-control" id="countMin" name="countMin">
          <option value=""> -- </option>
          @foreach ($numbers as $number)
            <option value="{{ $number }}" {{$number == old("countMin") ? "selected": ""}}>{{ $number }}</option>
          @endforeach
        </select>
      </div>

    </div>

  </div>
</div>

Все работает нормально, и элемент включает и выключает отображение как и ожидалось, но мой вопрос заключается в следующем.

Я обеспокоен тем, что, поскольку javascript зависит от уникального идентификатора среды, равного '3', если это когда-либо изменится (возможно, в результате случайного удаления и замены) , форма перестанет работать. Можно ли полагаться на идентификаторы базы данных для такого рода функций? Есть ли более надежный способ сделать это?

Спасибо, Дэн

Answer 1

Вы можете сделать селектор более надежным, используя класс .media-checkboxes и зацикливая его элементы. Затем вы можете извлечь и проверить идентификатор

$( ".media-checkboxes" ).each(function( index ) {
    var id = $(this).attr("id"); // you can extract 'name' or 'value'
    //if you want, you can check this id and only 
    //listen to the event for a certain item.
    $('#' + id).on("change", function () {
    var x = document.getElementById("block");
    if (this.checked) {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  });
});

. Этот код побуждает вас получить больше контроля над этим.