在 odoo 12 中使用 javascript 基于复选框隐藏字段

Question

我有两个字段，field1 是一个复选框，field2 是一个普通的文本字段。如果未选中 field1 且

，我想隐藏 field2

选中字段 1，然后显示字段 2。为此，我正在创建以下代码：


odoo.define('survey_inherit.FormView', function (require) {
"use strict";

var FormView = require('web.FormView');
var core = require('web.core');
var QWeb = core.qweb;

var FormView = FormView.extend({
   _checkField: function(){

        var $checkbox = $('.custom-control-input').val();

        if ($checkbox.is(':checked')) {

        $('.o_form_label').show();
        $('.mandatory_msg_class').show();
        }else{

          $('.mandatory_msg_class').hide();
        }//close else
   },
});//close FormController

return FormView; 
});

但是如果不勾选 field1 则 field2 不会隐藏，如果勾选 field1 则不会显示 field2。

更新

我的要求是我有一个表单，其中包含一个带有小部件 many2many_tags 的 one2many 字段和其他字段。点击many2many_tags的标签后，我想显示其他字段的完整记录。单击标签后，我可以获得完整的记录，这些记录也可以放在其他字段中。使用 attrs 并打开用于创建记录的表单视图后，field2 将永远不会显示。但是在创建记录后在编辑模式下打开表单视图并单击 many2many_tags 由于 attrs，未显示 field2。删除属性并打开用于创建记录字段的表单视图将显示（但不想显示，因为未选中 field1）并在创建记录后以编辑模式打开表单视图，单击 many2many_tags 按预期正常工作。属性条件：attrs="{'invisible':[('constr_mandatory','!=',True)]}" constr_ mandatory：复选框字段
这就是我不使用 attrs 并试图在 javascript 的帮助下实现的原因。我希望所提供的信息得到理解。另外，我更新了问题添加了截图以便更好地理解。

使用属性：

使用属性点击 many2many_tags

不使用属性：

Answer 1

var $checkbox = $('.custom-control-input').val();

此行将 $checkbox 设置为复选框的值。可能您只想要复选框元素本身：

var $checkbox = $('.custom-control-input');

Answer 2

尝试jQuery

$(function() {
  $("#selpoNO").click(function() {
    if ($(this).is(":checked")) {
      $(".if_pucEntry").show();
    } else {
      $(".if_pucEntry").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- checkbox -->
<label class="led-label"><input type="checkbox" class="led-btn" name="selpoNO" id="selpoNO" style="width: auto !important;"><strong>Checkbox</strong></label>

<!-- text box -->

<input type="text" class="form-control if_pucEntry" id="" name="" style="display: none;">

Answer 3

您可以添加新的小部件并覆盖 click 方法。

我用 BooleanToggle 字段做到了这一点。

var basic_fields = require('web.basic_fields');

var Toggle = basic_fields.BooleanToggle.extend({

    _onClick: function (event) {
        var self = this;
        this._super(event);
        var node = event.view.$('.custom-control-input');

        if(this.value) {
            node.show();
        } else {
            node.hide();
        }
    },
});

fieldRegistry.add('toggle', Toggle);

您需要添加小部件属性：

field name="field1" widget="toggle"/>

编辑
您需要在加载表单后隐藏字段，我建议您重写 FormRenderer 的 autofocus 功能。

var FormRenderer = require('web.FormRenderer');
FormRenderer.include({
    autofocus: function () {
        var self = this;
        // In my test I used fields values available in "self.state.data"
        if(self.state.model === 'sale.order' && field_value){
            var nodes = window.$('.custom-control-input');
            nodes.hide();
        }
        return this._super();
    },
});

在 odoo 12 中使用 javascript 基于复选框隐藏字段

Hide field based on checkbox using javascript in odoo 12

javascript

checkbox

hide

odoo