如何为动态添加的复选框设置动态启用/禁用

How to set Dynamic enable/disable for dynamically added checkox

本文关键字：动态 启用 设置 禁用 复选框 添加      更新时间：2023-09-26

为了生成动态复选框，我使用了类似的地图

{{range $key, $val := .package.Group_Name_Map}}
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3">
        <label><strong>{{$val}}</strong></label>
    </div>              
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="read">
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="write">
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="checkbox" name="update">
    </div>
  </div>
{{end}}

现在，我希望这些复选框由动态获取的值预定义。这是我为beego框架所做的

var statement = true;
if (statement) {
    $('input[type=checkbox]').prop('checked', true);
}

http://jsfiddle.net/r0o8kxvo/1/

这将select所有为checkboxes的input，如果statement是true ，则使它们成为checked

statement是所谓的占位符

动态获取值

在HTML中，只需添加disabled="disabled"作为要禁用的属性，并添加checked="checked"作为要检查的属性作为默认

<input type="checkbox" name="update" checked> checked
<input type="checkbox" name="update" disabled> disabled
<input type="checkbox" disabled="disabled" checked="checked"> disable and checked

在jQuery中使用prop（）函数

$('.checks').prop("checked",true);
$('.checks1').prop("disabled",true);
$('.enable').prop("disabled",false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="checkbox" class="checks" name="update"> checks1
    <input type="checkbox" class="checks1" name="updates"> disabled
    <input type="checkbox" class="enable" name="updates"> enable

试试这样的东西：

1.动态创建复选框

$('#btn').click(function () {
    var cb1 = "<input type='checkbox' class='cb1' value='cb1'>I am a checkbox.";
    $("#panel").html(cb1);
});

2.动态启用/禁用复选框

$('#ble').click(function () {
    var stat = $(".cb1").is(":disabled");
    if (stat) {
        $(".cb1").prop('disabled', false);
    } else {
        $(".cb1").prop('disabled', true);
    }
});

3.动态选中/取消选中复选框

$('#check').click(function () {
    var stat = $(".cb1").is(":checked");
    if (stat) {
        $(".cb1").prop('checked', false);
    } else {
        $(".cb1").prop('checked', true);
    }
});

DEMO

相关文章：