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

Question

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

，我想隐藏 field2

field1 被选中，然后显示 field2。为此，我正在创建以下代码：

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 并打开表单视图来创建记录后，字段 2 将永远不会显示。但是在创建记录后以编辑模式打开表单视图并单击 many2many_tags 由于 attrs，未显示 field2。 删除 attrs 并打开用于创建记录字段的表单视图将显示（但不想显示，因为未选中 field1）并在创建记录后以编辑模式打开表单视图，单击 many2many_tags 可以正常工作。 attrs 条件：attrs="{'invisible':[('constr_mandatory','!=',True)]}" constr_ 强制：复选框字段
这就是我不使用 attrs 并试图在 javascript 的帮助下实现的原因。我希望所提供的信息能被理解。另外，我更新了问题，添加了屏幕截图以便更好地理解。

使用 attrs:

使用 attrs 点击 many2many_tags

不使用 attrs：

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

需要添加widget属性：

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();
    },
});