You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何批量禁用/启用指定表单中的多个Jodit编辑器?

批量禁用/启用指定表单内的Jodit编辑器

Jodit编辑器初始化后,会将实例挂载到对应的<textarea>元素的_jodit属性上,利用这个特性,我们可以复用你处理普通文本框的思路,实现通用的批量控制逻辑:

通用实现代码

// 禁用表单内所有Jodit编辑器及对应textarea
function disableFormJoditEditors(formId) {
  const container = document.getElementById(formId);
  const textareas = container.getElementsByTagName('textarea');
  
  for (let i = 0; i < textareas.length; i++) {
    const textarea = textareas[i];
    // 检查当前textarea是否关联了Jodit实例
    if (textarea._jodit) {
      textarea._jodit.setDisabled(true);
    }
    // 同步禁用原textarea(可选,保持和编辑器状态一致)
    textarea.disabled = true;
  }
}

// 启用表单内所有Jodit编辑器及对应textarea
function enableFormJoditEditors(formId) {
  const container = document.getElementById(formId);
  const textareas = container.getElementsByTagName('textarea');
  
  for (let i = 0; i < textareas.length; i++) {
    const textarea = textareas[i];
    if (textarea._jodit) {
      textarea._jodit.setDisabled(false);
    }
    textarea.disabled = false;
  }
}

// 使用示例
disableFormJoditEditors('yourFormId'); // 禁用
// enableFormJoditEditors('yourFormId'); // 启用

原理说明

  • Jodit在初始化时,会自动将编辑器实例绑定到目标textarea的_jodit属性上,无需手动维护实例列表
  • 遍历表单内所有textarea,通过检查_jodit属性是否存在,就能判断该元素是否已被初始化为Jodit编辑器
  • 调用Jodit实例的setDisabled()方法控制编辑器状态,同时同步设置原textarea的disabled属性,保证交互一致性

内容的提问来源于stack exchange,提问作者ketna

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 16:20:31