Yii2: как сделать <div>отключенным / доступным только для чтения с помощью jQuery - PullRequest
Новая
       61

Yii2: как сделать <div>отключенным / доступным только для чтения с помощью jQuery

0 голосов
/ 12 июня 2018

Мне нужно отключить или сделать доступным только для чтения значок yii2-date-picker-widget в рамках Yii2.

Виджет выбора даты состоит из двух частей: a <span> длязначок и <input> для даты.Я могу отключить <input> с помощью jQuery, но не могу <span>.

Datepicker

Это код jQuery: 

$("#movements-vencimiento").prop("disabled", true); // Works.
$("#vencimientoDiv").prop("disabled", true) // Not works.

Это код Yii2: 

<div class="col col-md-4" id="vencimientoDiv">
    <?= $form->field($model, 'vencimiento')->widget(\common\widgets\DatePicker::className(), [
        'convertFormat' => true,
        'pluginOptions' => [
            'format' => 'dd/mm/yyyy',
            'autoclose' => true,
            'language' => 'es-AR',
            'todayHighlight' => 'true',
        ]
    ]) ?>
</div>

Это код, сгенерированный HTML: 

<div id="vencimientoDiv">
    <div class="form-group field-movements-vencimiento">
        <label class="control-label" for="movements-vencimiento">Vencimiento</label>
        <div class="input-group date">
            <span class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </span>
            <input type="text" id="movements-vencimiento" class="form-control" name="Movements[vencimiento]" disabled="">
        </div>
        <div class="help-block"></div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

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

см. Простую демонстрацию ниже 

$("#clicker").on('click', function(e) {
  e.preventDefault();
  alert("clicked");
});

$("#disab").on('click', function() {
  $("#clicker").css({
    pointerEvents: 'none'
  });
})

$("#enab").on('click', function() {
  $("#clicker").css({
    pointerEvents: 'auto'
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#." id="clicker">click me</a>

<input type="button" value="Disable Click" id="disab">
<input type="button" value="enable Click" id="enab">

Таким образом, в вашем случае вы напишите ниже, чтобы отключить 

$("#vencimientoDiv").css({pointerEvents:'none'});

, а затем снова включите с помощью 

$("#vencimientoDiv").css({pointerEvents:'auto'});
0 голосов
/ 12 июня 2018

У div нет свойства disabled.Вместо этого вы можете удалить обработчики событий, которые приводят к отображению календаря, например: 

$("#vencimientoDiv *").off();

Так просто.

...