jquery - 使用 jquery 切换 'required' 属性

Question

这是 jsfiddle:http://jsfiddle.net/LEZ4r/77/

以及代码本身:

<form action="demo_form.asp">
  <input type="text" name="first_name" value="" id="freeform_first_name"
    maxlength="150" required/>
  <div>
      Needs coupon? 
      <input type="radio" name="requires" value="yes">Yes</input>
      <input type="radio" name="requires" value="no" checked>No</input>
  </div>
        <div class="coupon" id="hidden">
            <input type="text" name="code"
            maxlength="150"/>
            </div>
        <input type="submit"/>
</form>

$(function(){
$('.coupon').toggle();  $('input:radio[name="requires"]').change(function() {
        var coup = $('.coupon');
        coup.toggle();
        if (coup.prop('required')) {
            coup.prop('required', false);
        } else {
            coup.prop('required', true);
        }
    });
});

当我通过 Chrome 中的控制台检查时，确实设置了所需的属性。但是，当提交表单时，它的表现就好像没有一样。出了什么问题？

Answer 1

您正在包含您的输入的div上设置required，而不是在input本身上。

您需要在输入上实际设置required:

coup.find('input').prop('required', true)