怎么给复选框选中状态时按钮为可点击状态，或复选框为选中状态时按钮为不可点击状态

最新推荐文章于 2021-11-25 19:18:10 发布
原创 最新推荐文章于 2021-11-25 19:18:10 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#怎么给复选框选中状态时按钮为可点击状态 #或复选框为选中状态时按钮为不可点击状态

博客围绕复选框状态与按钮可点击状态的关联展开，探讨复选框选中时按钮可点击或不可点击的设置方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

具体如下：


希望能帮到你！

【避坑指“难”】复选框☑️勾选，按钮可点击。常用于注册页、须知页，同意XXX协议（内含material-ui的坑）
椰卤工程师的个人博客
12-04 1145
PM：“用户需要同意XXX协议，才能点击按钮，否则就给它置灰！！！” 我：你说的对 在项目中经常会有这样需求，特别是在H5移动端，成了家常便饭，今天来详细讲讲代码实现过程。 技术栈：react + material-ui + typescript 实现效果如下 下面放上主要代码，主要逻辑在于复选框checkbox和按钮button，上面的文字布局就不赘述喽。 由于使用的是material-ui，所以部分组件名字和antd是有区别的，大家举一反三就好啦。 部分逻辑会写在注释里！！！ HTML <G.
Jquery 复选框选中之后 按钮才能点击
06-04
利用Jquery 做出的效果是：复选框选中之后 按钮才能点击
JS中，复选框（checkbox） 选中，按钮（button）可用，否则按钮不可用
swirlee的博客
08-09 8668
同意协议 &amp;amp;amp;lt;/body&amp;amp;amp;gt; &amp;amp;amp;lt;script&amp;amp;amp;gt; function check(){ var checkbox = document.getElementById(&amp;amp;
根据checkBox的状态，控制按钮可否点击。不可点击置灰
热门推荐
凯文-杰的博客
08-13 1万+
主要想实现的功能就是，当checkBox未选择时，按钮置灰不可点击；当checkBox选中时，按钮可以点击并且变成可以点击的颜色。主要用途就在用户在使用应用之前，比如要同意一些协议或者条款这些。 废话不多说，直接上代码： //drawable文件
checkbox 选中按钮可用，未选中按钮不可用
canglingyue的专栏
07-31 6032
我已阅读并接受《服务条款》
选中复选框，可以控制相关复选框变为不可选
岁寒松柏
08-12 2810
非常棒的一个JS复选框控制代码,经常在网站上看到的，在很大一堆的选择框面前，如果你选择的其中一个复选框，那么和它相反的选项就会变为灰色，成为不可选  function f1(chk){ var t = document.getElementById("txt1"); t.disabled = !chk.checked;  }   选中复选框，相关类变灰
vue element-ui table根据条件设置某一行的复选框选择为禁用状态：
sunrj_niu的博客
12-24 7790
vue element-ui table根据条件设置某一行的复选框选择为禁用状态： 如图：根据条件，设置某行的复选框不可选，禁用 解决方案： 给复选框一个事件： :selectable=“selectable” <el-table ref="multipleTableBind" :row-style="{height: '10px'}" :data="applyInfoList" toolt
勾选复选框按钮可用否则不可用
weixin_30853329的博客
05-19 358
勾选复选框按钮可用否则不可用function check(){ var chec=document.getElementById("chec"); if(chec.checked==true){ alert(1111) document.getElementById("btn").removeAttribute("disabled") }else{ alert(22222)...
多选框设置选中状态及不可修改状态jQuery
qinduan007的博客
06-19 1925
多选框设置选中状态及不可修改状态jQuery 复选框如何获取到被选中的: 复选框如何让其默认被选中: 复选框如何让其默认选中并且不能操作更改: readonly: 给复选框设置readonly属性对复选框无用， disable:设置disable属性可以达到禁用的目的，但是多选框会变为灰色，原本的颜色会失效 如果想要达到用户无法操作的目的，又不想改变颜色可以添加 οnclick=" return false;" 小朋友们注意false后面的分号哦，缺少了就没有效果的哦 ...
js实现当复选框选中状态时后面的文本框可编辑，当没选中时文本框呈灰色
岁寒松柏
08-13 1026
function checks() { if(document.all.checkbox1.value==0) { document.form.textwidth.disabled=false; document.form.textheight.disabled=false; } else { document.form.textwidth....
用JavaScript实现选项卡功能，当选择全选按钮的时候，下边的复选框所以按钮被选中，当取消一个复选框按钮时，全选框按钮失去效果，当再次把所有复选框按钮选择实现全选
weixin_47485418的博客
06-30 830
点击全选，让下边的按钮都被选中，以及复选框的交互 简单上代码啦~~ CSS样式 <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse:
微信小程序之 判断CheckBox选中状态
gyueh的博客
11-25 1万+
目的：复选框未选中时，提交按钮为不可点击状态；复选框选中时，提交按钮为可点击状态 复选框未选中时 复选框选中时 wxml代码如下： <view class="bottom"> <view style="color:#999999;text-align:center;padding-bottom: 30rpx;"> <checkbox-group bindchange="checkboxChange"> <label class="ch
帆软 复选框按钮控制编辑
最新发布
05-04
<think>好的，我现在需要帮助用户解决在帆软报表中通过复选框按钮控制编辑功能的实现方法。首先，我得理解用户的具体需求。用户提到使用复选框来控制编辑功能，可能是指根据复选框的选择情况，决定某些单元格或控件是否可编辑。这可能涉及到前端JavaScript的使用，以及帆软内置API的调用。 根据用户提供的引用内容，引用[1]和[2]都提到了使用JavaScript来处理复选框的选择事件，并通过参数传递或过滤数据。比如，引用[1]中通过下拉框的编辑后事件调用SQL获取数据，然后设置复选框的值。引用[2]则涉及获取选中行的数据，并通过打印方法传递参数。这些例子展示了如何在帆软中使用JS与控件交互，以及参数传递的方法。 接下来，我需要确定如何将这些方法应用到复选框控制编辑功能上。可能的思路是：当复选框被选中时，启用编辑功能；未选中时，禁用编辑功能。这需要用到复选框的状态变化事件，然后动态设置相关单元格的编辑属性。 帆软的单元格编辑属性可以通过JavaScript来控制吗？根据文档，可以使用FR.Msg.alert或FR.UI的方法，但具体如何设置单元格的可编辑状态可能需要查找相关API。或者，可能需要通过参数传递复选框的值到条件属性中，利用条件属性来控制单元格是否可编辑。 例如，复选框的值绑定到一个参数，比如edit_flag。然后在需要控制的单元格的条件属性中，设置当edit_flag为true时允许编辑。这种方法可能不需要JS，直接使用帆软的参数和条件属性功能。但用户可能希望实时切换，而不需要提交参数，这就需要前端JS动态修改。 所以可能需要结合两种方法：使用参数和条件属性，同时通过JS在复选框变化时动态修改参数值，并刷新条件属性。或者，使用JS直接修改单元格的编辑属性。但不确定帆软的API是否支持直接设置单元格的编辑状态。 根据引用[2]，在按钮点击事件中获取选中行数据并调用打印方法，传递参数。类似的，复选框的状态变化事件中，可以获取当前是否选中，然后通过FR的方法设置某个参数的值，进而影响条件属性。例如： 1. 添加复选框控件，绑定到参数edit_mode。 2. 在需要控制的单元格中，设置条件属性，当edit_mode为true时启用编辑。 3. 使用JS在复选框状态变化时，提交参数并刷新页面部分区域，使条件属性生效。 但这样可能需要每次勾选都提交参数，可能会影响用户体验。另一种方法是使用前端JS直接修改单元格的编辑属性，但需要确认是否存在这样的API。 查找帆软的JS API文档，发现可以使用contentPane.setCellEditable()方法，或者类似的方法来动态设置单元格的可编辑状态。例如： var cell = contentPane.getCell(0,0); // 获取单元格 cell.setEditable(true); // 设置为可编辑 但需要验证这个方法的有效性。或者，可能通过设置单元格的CSS类或属性来达到目的。 如果这样的方法存在，那么解决方案步骤可能是： 1. 设计报表模板，添加复选框控件，并设置其值（如1表示启用编辑，0表示禁用）。 2. 编写复选框的编辑后事件JS代码，获取复选框的值，并根据该值调用API设置目标单元格的可编辑状态。 3. 测试复选框选中和取消时，对应单元格是否可编辑。 如果帆软没有直接提供这样的API，可能需要通过间接方法，例如隐藏/显示编辑控件，或者启用/禁用控件。例如，对于单元格中的文本控件，可以通过JS设置其disabled属性。 假设目标单元格是A1，其中有一个文本控件，可以尝试： var widget = contentPane.getWidgetByCell(0,0); // 获取控件 widget.setEnable(true); // 启用或禁用 这可能需要具体控件的类型和方法支持。 另外，引用[1]中使用了编辑后事件，调用SQL并将值转义为复选框所需格式。这可能涉及到动态加载数据，但用户的需求是控制编辑功能，所以可能需要更简单的事件处理。 总结可能的步骤： 1. 添加复选框控件，设置其控件名称，如“edit_checkbox”。 2. 在需要控制编辑的单元格中，添加一个文本控件或其他输入控件。 3. 编写复选框的编辑后事件JS代码，获取复选框的选中状态。 4. 根据选中状态，使用JS API设置目标单元格控件的可用性或可编辑性。 例如： var isChecked = this.getValue(); // 获取复选框当前值 var targetWidget = contentPane.getWidgetByName("target_cell"); // 根据控件名称获取目标控件 targetWidget.setEnabled(isChecked); // 设置是否启用 或者，如果目标单元格的控件是动态生成的，可能需要通过单元格位置获取： var targetWidget = contentPane.getWidgetByCell(0, 0); // 第1行第1列 targetWidget.setEditable(isChecked); 这需要实际测试，因为不同版本的帆软可能API不同。 如果用户的需求是控制多个单元格或行的编辑状态，可能需要遍历这些单元格或控件，逐一设置属性。 此外，可能需要处理初始化状态，确保页面加载时根据复选框的默认值设置编辑状态。 最后，确保代码的正确性和兼容性，可能需要参考帆软的官方文档或社区示例，确认所使用的API是否存在及用法。</think>在帆软报表中通过复选框控制编辑功能的实现方法可分为以下步骤： ### 一、基础设置 1. **添加复选框控件** - 在参数面板添加「复选框控件」，控件名称设为`edit_control`，数据字典设置为布尔型（例如：`true`和`false`）。 2. **绑定编辑目标单元格** - 在报表主体中，选中需要控制编辑的单元格（如A2），右键选择「控件设置」添加文本控件，命名为`target_input`。 --- ### 二、JavaScript动态控制 ```javascript // 复选框编辑后事件 var isEdit = this.getValue(); // 获取复选框状态 var targetWidget = contentPane.getWidgetByName("target_input"); // 通过控件名称获取目标单元格 targetWidget.setEnabled(isEdit); // 动态设置编辑状态 ``` --- ### 三、条件属性辅助控制（可选） 若需兼容参数提交模式，可结合条件属性： 1. **绑定参数** - 将复选框控件关联到参数`edit_flag`。 2. **设置条件属性** - 在目标单元格的条件属性中，添加「控件可用」条件，公式为`$edit_flag = true`[^1]。 --- ### 四、扩展场景：控制整行编辑 若需通过复选框批量控制多行编辑： ```javascript // 遍历行号修改编辑状态 var currentRow = this.options.location.row; // 获取当前行 for (let col = 0; col < 5; col++) { // 假设控制前5列 var widget = contentPane.getWidgetByCell(currentRow, col); widget.setEnabled(this.getValue()); } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值