Flask WTForms使用多个按钮禁用多个字段

时间:2019-05-10 23:29:12

标签: javascript python flask wtforms

我有一个用WTForms制成的Flask表单。它包括3个复选框和9个其他字段。如果选中三个复选框中的一个,则会禁用其中的7个字段。

这里只是复选框的一小部分示例,它是在选中该复选框时禁用的字段,也是OptionalIf类,如果选中该复选框,则该字段使所选字段变为可选:

class OptionalIf(Optional):

    def __init__(self, otherFieldName, *args, **kwargs):
        self.otherFieldName = otherFieldName
        #self.value = value
        super(OptionalIf, self).__init__(*args, **kwargs)

    def __call__(self, form, field):
        otherField = form._fields.get(self.otherFieldName)
        if otherField is None:
            raise Exception('no field named "%s" in form' % self.otherFieldName)
        if bool(otherField.data):
            super(OptionalIf, self).__call__(form, field)

在我的表单类中:

holiday = BooleanField('Holiday?', id="holiday", validators=[Optional()])
start_time = TimeField(label='Start Time', id='timepick1', format='%H:%M', validators=[OptionalIf('holiday'), OptionalIf('holiday_noAddedHours'), OptionalIf('sick')])

holiday_noAddedHourssick是其他复选框字段,每个字段都有自己的ID:holidayNAHsick

由于有七个要禁用的字段,因此我必须在脚本中包含它:

document.getElementById('holiday').onchange = function(){
  document.getElementById('timepick1').disabled = this.checked;
  document.getElementById('timepick2').disabled = this.checked;
  ....
}
document.getElementById('holidayNAH').onchange = function(){
  document.getElementById('timepick1').disabled = this.checked;
  document.getElementById('timepick2').disabled = this.checked;
  ....
}

然后再输入一个sick ID。

我想知道是否可以缩短此时间,而不是在选中该框的情况下,禁用字段中有3个document.getElementById和7行吗?我知道拥有一个ID是不可能的,因为getElementById会获得第一个元素,那么我将如何处理呢?

谢谢您的建议。

1 个答案:

答案 0 :(得分:1)

关于要更改的ID列表的for循环怎么样?例如:

all_ids = ['timepick1', 'timepick2'];


for (i=0; i<all_ids.length; i++){
    document.getElementById(all_ids[i]).disabled = this.checked;
}