Jquery not working in Yii2

Question

Here is my code https://jsfiddle.net/tusharj/0hoh109k/1/

this working perfectly in jsfiddle, but while am using this code in yii2, its not working

_form.php

 <?= $form->field($model, 'relation')->checkboxList($relation, $options =   ['class' => 'check']);} ?>

this is html code for above form, above code is looks like in below in inspect element

<div id="employeedetails-relation" class="check">
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="1"> Father</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="2"> Mother</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="3"> Spouse</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="4"> Child1</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="5"> Child2</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="6"> Father-in-law</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="7"> Mother-in-law</label></div></div>

below code is used jquery in yii2

<?php

$this->registerJs(' 

    $(document).ready(function () {
    $(\'#employeedetails-relation\').on(\'change\', \':checkbox\', function () {
        var value = parseInt($(this).val());

        var checkedEl = [];
        $(\':checkbox:checked\').each(function () {
            checkedEl.push(parseInt($(this).val()));
        });

        console.log(checkedEl);
        $(\'#employeedetails-relation :checkbox\').prop(\'disabled\', false);
        console.log(value);
        console.log($.inArray(value, checkedEl));
        if ($.inArray(1, checkedEl) > -1 || $.inArray(2, checkedEl) > -1) {
            $(\':checkbox[value=6]\').prop(\'disabled\', true);
            $(\':checkbox[value=7]\').prop(\'disabled\', true);
        } else if ($.inArray(6, checkedEl) > -1 || $.inArray(7, checkedEl) > -1) {

            $(\':checkbox[value=1]\').prop(\'disabled\', true);
            $(\':checkbox[value=2]\').prop(\'disabled\', true);
        }

    });

});', \yii\web\View::POS_READY);

?>

I don't Know why its not working in yii2

Answer 1

Try This it works

namespace frontend\modules\test\assets;

use yii\web\AssetBundle;

class YourAsset extends AssetBundle
{
    /**
     * @inheritdoc
     */
    public $sourcePath = '@frontend/modules/test/assets';

    /**
     * @inheritdoc
     */
    public $publishOptions = [
        'forceCopy' => YII_DEBUG,
    ];

    /**
     * @inheritdoc
     */
    public $js = [
        'js/your-file.js',
    ];

    /**
     * @inheritdoc
     */
    public $depends = [
        'yii\web\JqueryAsset',
    ];
}

Answer 2

Registering js code like that is considered bad practice. Use assets instead, it's even recommended in official docs.

Note that your code does not even depend on any php data.

Move it to separate file and include using assets.

Here is basic example:

<?php

namespace frontend\modules\test\assets;

use yii\web\AssetBundle;

class YourAsset extends AssetBundle
{
    /**
     * @inheritdoc
     */
    public $sourcePath = '@frontend/modules/test/assets';

    /**
     * @inheritdoc
     */
    public $publishOptions = [
        'forceCopy' => YII_DEBUG,
    ];

    /**
     * @inheritdoc
     */
    public $js = [
        'js/your-file.js',
    ];

    /**
     * @inheritdoc
     */
    public $depends = [
        'yii\web\JqueryAsset',
    ];
}

Registering asset bundle in view:

YourAsset::register($this);

For more information about assets, check official docs.