允许1" JS生成"复选框随时检查

时间:2018-01-17 05:00:04

标签: javascript jquery html checkbox

我如何能够让js在任何时候只允许选中一组复选框中的1个复选框。我已按照以下代码完成此操作,以获取我在html代码中创建的复选框但是此代码(请参阅下面的我的尝试)不适用于由JS 生成的复选框。任何帮助

请注意,在最底层的代码中,JS创建了许多复选框作为for循环函数的一部分,因此on('click', function(evt)需要适合len变量才能使其工作

Html代码:

<tr>
    <td>Prior to work on Site- Submit Telstra Building Works Permit in TCSS</td>
    <td>        
    <fieldset data-role="controlgroup" data-type="horizontal">
    <input type="checkbox" name="F06_yes_1" id="F06_yes_1" data-mini="true" class = "f06_1" />
    <label for="F06_yes_1">Yes</label>                              
    <input type="checkbox" name="F06_no_1" id="F06_no_1" data-mini="true" class = "f06_1"/>
    <label for="F06_no_1">No</label>                                
    <input type="checkbox" name="F06_na_1" id="F06_na_1" data-mini="true" class = "f06_1" />
    <label for="F06_na_1">N/A</label>                               
    </fieldset>                             
    </td>
    <td><input name="F06-c-1" type="text" /></td>
</tr>

工作js代码:

$('input.f06_1').on('click', function(evt) {
    if ($('.f06_1:checked').length > 1) {
        $('input.f06_1').not(this).prop('checked', false).checkboxradio("refresh");
    }

});

js创建的复选框的代码:

table_asset.append(
'<tr>\
    <td><input name="asset_description_'+ (len+1)+'" type="text"  value="' + key + '" /></td> \
    <td><input name="asset_cost_'+ (len+1)+'" type="text" value="' + formatter.format(data[item][key]) + '" onkeydown="return false"/></td> \
    <td>\
        <fieldset data-role="controlgroup" data-type="horizontal"> \
            <input type="checkbox" name="asset_allocation_capex_'+ (len+1)+'" id="asset_allocation_capex_'+ (len+1)+'" data-mini="true" ' + capex_checked_var + ' class = "capex_opex_'+ (len+1)+'" /> \
            <label for="asset_allocation_capex_'+ (len+1)+'">Capex</label> \
            <input type="checkbox" name="asset_allocation_opex_'+ (len+1)+'" id="asset_allocation_opex_'+ (len+1)+'" data-mini="true" ' + opex_checked_var + ' class = "capex_opex_'+ (len+1)+'" /> \
            <label for="asset_allocation_opex_'+ (len+1)+'">Opex</label>\
        </fieldset>\
    </td>\
    <td><input name="asset_number_'+ (len+1)+'" type="text" value=" ' + asset_number_var + ' "/></td> \
    <td><select name="asset_desc_' + (len+1)+'" id="test" data-mini="true" ' +  asset_type + '</select> </td> \
    <td style="display:none;" > <input  name="type_'+ (len+1)+'" type="text" value="design"/></td>\
</tr>'  
);

                                                );

1 个答案:

答案 0 :(得分:1)

如果您只想选择一个选项,则应使用单选按钮而不是复选框。

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio