0

I'm trying to create a condition to go to the next stage of a process.

The user needs select either 'Abandon' or 'Continue' before hitting the 'Next' button.

If one or the other is selected, hitting next button goes to the next page. If not, an alert says "Have you checked Abandon or Continue?

This is what I've done looking at other codes but it is not working for me. Nothing of the jQuery works, not even the alert =S Can anyone help me?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page</title>
<link href="remote_style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#next').on('click', function() {
    if ($('#abandon' || '#complete').attr('checked') === "checked") {
        window.open('remote-user-testing5.html');
    } else {
        alert("Have you checked Abandon or Complete?");
    }
    return false;
});
</script>
</head>

<body>

<div>
    <h1>Instruction window</h1>
        <div class="text">
            <p>Now you will be asked to carry out 3 tasks and provide feedback on your experience.</p>
            <p>To complete each task, you will need to navigate through a website.</p>
            <p>Task complete: When you feel you have completed a task tick 'Complete' and click 'Next' in this Instruction Window.</p>
            <p>Abandon task: If you are finding it difficult to complete a task, tick 'Abandon' and click 'Next' this Instruction Window.</p>
            <p>Please remember we are not testing you, we are evaluating and testing the website.</p>
            <p>When you are ready click 'Next' to find out your task scenario.</p>
            <input type="radio" name="radio" value="abandon" id="abandon">Abandon<br>
            <input type="radio" name="radio" value="complete" id="complete">Complete<br>
            <button id="next">Next</button>
        </div>
</div>

</body>
</html>
4

4 回答 4

2

您的脚本需要在 DOM 准备就绪时运行，并且您的选择器无效，您必须使用单独的选择器并使用.is(":checked") 

$(document).ready(function(){
   $('#next').on('click', function() {
       if ($('#abandon').is(":checked") || $('#complete').is(':checked') ) {
           window.open('remote-user-testing5.html');
       } else {
           alert("Have you checked Abandon or Complete?");
       }
       return false;
   });
});

您需要该.ready功能，就好像 DOM 没有完全准备好一样，它无法看到元素以选择它们。

.is检查所选元素是否具有传递的参数，在这种情况下:checked测试checked属性

于 2013-08-27T11:32:28.840 回答
1

尝试 ：

$(document).ready(function(){
     $('#next').on('click', function() {
          if($('#abandon').is(':checked') || $('#complete').is(':checked')) {
              window.open('remote-user-testing5.html');
           } else {
              alert("Have you checked Abandon or Complete?");
           }
           return false;
     });
});
于 2013-08-27T11:34:16.907 回答
0

代替if ($('#abandon' || '#complete').attr('checked') === "checked")

尝试

if ($('#abandon').attr('checked') === "checked" || $('#complete').attr('checked') === 'checked')
于 2013-08-27T11:31:46.487 回答
0

尝试

$('#next').on('click', function() {
    if ($('#abandon, #complete').is(':checked')) {
        window.open('remote-user-testing5.html');
    } else {
        alert("Have you checked Abandon or Complete?");
    }
    return false;
});
于 2013-08-27T11:32:39.413 回答