如何对表单组控件进行分组并禁用未选中的单选按钮组?

时间:2014-04-22 02:17:45

标签: twitter-bootstrap kendo-ui

我在form-group- 单选按钮,标签和kendo dateTime选择器中有一组控件。

选择一个组时,应禁用组项目。

以下是3个表单组的代码:

<!-- group 1 -->
<div class="form-group">
    <input type="radio" name="maintenanceGroup" id="dateTimepicker1" value="setDate" data-bind="checked: maintenanceOption"/>
     <label style="display: inline;  margin-top: 10px; margin-right: 10px" for="datetimepicker1">Run the maintenance scheduled </label>
        <input class='input-group date' id='kendodatetimepicker' data-bind=" kendoDateTimePicker: {value: maintenanceDateTime , format: 'yyyy-MM-dd hh:mm tt', parseFormats: ['yyyy-MM-ddhh:mm tt']}" />
</div>


<!-- group 2 -->
 <div class="form-group">
     <input type="radio" name="maintenanceGroup" id="dateTimepicker2" value="postponeDate"  data-bind="checked: maintenanceOption"/>
     <label style="display: inline; margin-top: 10px; margin-right: 10px" for="dateTimepicker2">Postpone maintenance for</label>
     <input class='input-group date' id='postponeDatetimepicker' 
            data-bind="kendoDateTimePicker: {value: postponeMaintenanceDateTime , format: 'yyyy-MM-dd hh:mm tt', parseFormats: ['yyyy-MM-ddhh:mm tt']}" />
</div>


<!-- group 3 -->
<div class="form-group">
     <input type="radio" name="maintenanceGroup" id="dateTimepicker3" value="skipDate" data-bind="checked: maintenanceOption"/>
     <label for="dateTimepicker3">Skip scheduled maintenance. The next scheduled maintenance is for </label>
     <span id="skipMaintenance" data-bind="text: skippedMaintenanceTime"></span>
</div>

假设在选择第一个单选按钮时,应禁用下两个表单组元素中的所有控件。

以下是相同的小提琴链接:http://jsfiddle.net/T3zge/73/

任何人都可以帮我解决这个问题。

感谢。

1 个答案:

答案 0 :(得分:1)

在每个单选按钮上侦听点击事件,并禁用/启用处理程序中需要的任何控件:

$('#dateTimepicker1').click(function(e){
    $('#postponeDatetimepicker').data('kendoDateTimePicker').enable(false);
    $('#kendodatetimepicker').data('kendoDateTimePicker').enable(true);
});

$('#dateTimepicker2').click(function(e){
    $('#kendodatetimepicker').data('kendoDateTimePicker').enable(false);
    $('#postponeDatetimepicker').data('kendoDateTimePicker').enable(true);
});

Here's a fiddle