Question

我有一个客户希望我创建一个表单，用户必须为每个问题选中“是”才能继续。

如果＃Question1和＃question2 =“yes”则显示“submit”，否则警告“除非检查所有问题，否则无法继续前进。”

JQuery如何实现这一目标？

<form>
    <div id="question1">
     <input type="radio" name="test1" value="Yes" checked> Yes<br>
       <input type="radio" name="test1" value="no" checked> no<br>
    </div>
    <div id="question2"> 
     <input type="radio" name="test3" value="Yes" checked> Yes<br>
       <input type="radio" name="test3" value="no" checked> no<br>
    </div>
      <input type="submit" value="Submit">
    </form>

Answer 1

查找

$('[type="radio"]').change(function() {
  var allYes = true;
  $('[type="radio"]').each(function() {
    var $input = $(this);
    if ($("[name='" + $input.prop("name") + "'][value='no']:checked").length != 0) {
      allYes = false;
    }
  });
  if (allYes) {
    $("#submit").removeAttr("disabled");
  } else {
    $("#submit").attr("disabled", "disabled");
  }
});

Plunker：http://plnkr.co/edit/db0gIw85G3TQakGIotRG

Answer 2

你可以试试这种方式

 if($('input[name=test1]:checked').val() !== 'Yes' && $('input[name=test3]:checked').val() !== "Yes") {
    $('input[type=submit]).addClass('disabled');
}

Answer 3

这可以通过javascript轻松完成，这里是工作示例

<form onsubmit="return buttonClicked()" action="LoginServlet">
    <div id="question1">
     <input id="qu1Button1" type="radio" name="test1" value="Yes" checked> Yes<br>
       <input id="qu1Button2" type="radio" name="test1" value="no" checked> no<br>
    </div>
    <div id="question2"> 
     <input id="qu2Button1" type="radio" name="test3" value="Yes" checked> Yes<br>
       <input id="qu2Button2" type="radio" name="test3" value="no" checked> no<br>
    </div>
      <input type="submit" value="Submit">
 </form>

 <script>
    function buttonClicked(){
        if(document.getElementById("qu1Button1").checked && document.getElementById("qu2Button1").checked){ //checking whether both the yes buttons are checked
            return true;
        }
        else{
            alert("Please select yes for both the questions");
            return false;
        }
    }
 </script>

Answer 4

这个解决方案对我来说似乎比其他选项更好。感谢所有参与的人。

https://jsfiddle.net/bowtiekreative/42h74hrw/4/

<script type="text/javascript">
$("input:submit").addClass('disabled').attr("disabled", true);
$( "input" ).change(function() {

var buttons = jQuery("input:radio:checked").get();

    var values = $.map(buttons, function(element) {
        return $(element).attr("value");
    });
    if(values == "Yes,Yes,Yes") {
        alert("both yes");
        $("input:submit").removeClass().attr("disabled", false);
        $(".err-msg").hide();
    }
    else
    {
        $("input:submit").attr("disabled", true);
        $("input:submit").addClass('disabled').attr("disabled", true);
        $(".err-msg").show();
    }

});
</script>

如果所有无线电输入的值等于是，则显示按钮，否则提醒

4 个答案: