How to hide fields with toggle checkbox in ui_component Magento 2
Replace your form code with below
<field name="open_amount" formElement="checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">[Vendor]_[Module]/js/mycheckbox</item>
<item name="source" xsi:type="string">homeslider</item>
<item name="default" xsi:type="number">1</item>
</item>
</argument>
<settings>
<dataType>boolean</dataType>
<label translate="true">Open Amount</label>
<dataScope>status</dataScope>
</settings>
<formElements>
<checkbox>
<settings>
<valueMap>
<map name="false" xsi:type="number">0</map>
<map name="true" xsi:type="number">1</map>
</valueMap>
<prefer>toggle</prefer>
</settings>
</checkbox>
</formElements>
</field>
<field name="min_val">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Open Amount Min Value</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">faq</item>
</item>
</argument>
</field>
<field name="max_val">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Open Amount Max Value</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">faq</item>
</item>
</argument>
</field>
Make mycheckbox.js file in vendor/module/view/adminhtml/web/js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/single-checkbox',
'Magento_Ui/js/modal/modal',
'ko'
], function (_, uiRegistry, select, modal, ko) {
'use strict';
return select.extend({
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
onUpdate: function (value)
{
console.log(value);
var field_min_val = uiRegistry.get('index = min_val'); // get field
var field_max_val = uiRegistry.get('index = max_val'); // get fieldset
if (value == 0) {
field_min_val.hide();
field_max_val.hide();
}
else {
field_min_val.show();
field_max_val.show();
}
return this._super();
},
fieldDepend: function (value)
{
setTimeout( function(){
var field_min_val = uiRegistry.get('index = min_val');
var field_max_val = uiRegistry.get('index = max_val');
if (value == 0) {
field_min_val.hide();
field_max_val.hide();
}
else {
field_min_val.show();
field_max_val.show();
}
});
}
});
});
Hope it will be helpful.