Как включить/отключить кнопку с флажком, используя JS внутри хрустящей формы Django?

Я пытаюсь реализовать это: http://jsfiddle.net/8YBu5/7/

Я хотел бы включить/отключить кнопку отправки хрустящих форм django на основе флажка в той же хрустящей форме.

Является ли это возможным? как заставить этот JS работать?

JS, кажется, ничего не делает. Я чувствую, что мне не хватает чего-то основного здесь ...

вот моя хрустящая форма:

email = forms.EmailField(label=_("Email"))
password1 = forms.CharField(widget=forms.PasswordInput,label=_("Password"))
billing_secret = forms.CharField()
termsandcond = forms.TypedChoiceField(
        label = False,
        choices = ((1, "Yeah sure"),),
        initial = '0',
    )

def __init__(self, *args, **kwargs):
    billing_secret = kwargs.pop('billing_secret', None)
    super(RegistrationForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_method = 'post'
    self.helper.form_action = '.'

    self.helper.layout = Layout(
        Field('email', placeholder=_("Email")),
        Field('password1', placeholder=_("Password")),
        InlineCheckboxes('termsandcond'),
        Submit("save", _("Get Started"),css_class="pull-right", css_id="postme"),
    )

вот мой JS:

$('#id_termsandcond_1').click(function(){

    if($(this).attr('checked') == false){
         $('#postme').attr("disabled","disabled");   
    }
    else {
        $('#postme').removeAttr('disabled');
    }
});

вот соответствующие визуализированные элементы хрустящей формы django:

<div id="div_id_termsandcond" class="form-group">
    <div class="controls ">
        <label class="checkbox-inline">
            <input type="checkbox" name="termsandcond" id="id_termsandcond_1" value="1">Yeah sure
        </label>
    </div>
</div>

<input type="submit" name="save" value="Get Started" class="btn btn-primary pull-right" id="postme">

django javascript forms twitter-bootstrap django-crispy-forms
person Ryan Kempe    schedule 03.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это работает. Вам нужно использовать .prop('checked').

<html>
<body>
    <form action="/somehandler.html" method="get">
        <div id="div_id_termsandcond" class="form-group" >
            <div class="controls ">
                <label class="checkbox-inline">
                    <input type="checkbox" name="termsandcond" id="id_termsandcond_1" value="1">Yeah sure
                </label>
            </div>
        </div>
        <input type="submit" name="save" value="Get Started" class="btn btn-primary pull-right" id="postme">
    </form>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">

        $('#postme').attr('disabled', 'disabled');
        $('#id_termsandcond_1').click(function(){
            if($(this).prop('checked')  === false){
                $('#postme').attr('disabled', 'disabled');
            }else {
                $('#postme').removeAttr('disabled');
            }
        });
    </script>
</body>
</html>
person Simon    schedule 05.09.2015