Search code examples
jqueryyii2disabled-inputreadonly-attribute

Yii2: how to make a <div> disabled/readonly with jQuery

I need to disabled or make readonly the icon of the yii2-date-picker-widget under the Yii2 framework.

The datepicker widget has two parts: a <span> for the icon and a <input> for the date. I can disabled the <input> using jQuery but I can't the <span>.

Datepicker

This is the jQuery code:

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

This is the Yii2 code:

<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>

This is the HTML generated code:

<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>
Solution

  • A div does not have a disabled property. What you can do instead, is removing the event handlers that cause the calendar to show up, like this:

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

    As simple as that.