jQuery: атрибут поля переключения: не отмечен - PullRequest
0 голосов
/ 13 октября 2019

Я хотел бы иметь возможность редактировать поле с несколькими вариантами выбора, когда («Обновить данные?») Флажок установлен , и disabled поле снова, если установлен флажок проверено .

Важно то, что статус проверено всегда приводит к возможности редактирования, в то время как не проверено означает, что поле равно disabled, независимо от того, если язагрузить форму с флажком или без флажка в качестве исходного состояния (я могу сохранить либо), либо

Я нашел несколько полезных ответов, но боролся с синтаксисомчтобы объединить их в моём решении.

Ниже можно один раз переключиться, потом застрянет:

$(function() {
  $("#checkbox1").change(function() {
    if ($("#field2").attr('disabled', !this.checked)) {
      $("#field2").removeAttr("disabled");
    } else {
      $("#field2").attr("disabled", "disabled");
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
                Multiselect
            </label>
    <div class="col-sm-7">
      <select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
        <option value="1" selected>Product 1 </option>
        <option value="3" selected>Product 3</option>
        <option value="2">Product 2</option>

      </select>
    </div>
  </div>
  <div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
            Update Data?
        </label>
    <div class="col-sm-7">
      <div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
    </div>
  </div>
</form>

Ответы [ 2 ]

1 голос
/ 13 октября 2019

Просто измени свой JS на это. У вас есть change слушатель с неверным идентификатором.
Слушатель должен быть на #id_to_update (вход) вместо #checkbox1, который является div.

$(function() {
    $("#id_to_update").change(function() {
        $("#field2").prop('disabled', !this.checked);
    });
})
1 голос
/ 13 октября 2019

Вот решение, которое вы ищете

$(function() {
  $('#field-editable').change(function() {
    $('#firstname').prop('disabled', !this.checked);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <label for="field-editable">
        <input type="checkbox" id="field-editable">
        do you want to edit            
        </label>
  <input type="text" name="firstname" id="firstname" disabled="disabled">
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...