填写完所有可放弃的div后启用提交按钮
我正在使用jquery进行一次测验。下面是屏幕快照。
这个测验是拖放式的测验。所有工作都已完成并取得成功。现在我遇到了关于启用提交按钮的问题。
要求
- 页面加载完成后必须禁用按钮
- 选项应该是可拖动的，并且可以在空白处放置 - 完成
没做什么？
在两个项目被拖入空白区域后，应启用
请看我的jquery有关此事。并告诉我在哪里犯错误
jQuery(document).ready(function () {
jQuery('.selected_answer1' && '.selected_answer2').on('drop change', function (event, ui){
alert('dropped');
if (jQuery(this).drop()) {
jQuery('.fillinblank_button').prop('disabled', false);
alert('dropped')
}
else {
jQuery('.fillinblank_button').prop('disabled', true);
}
});
});
关于班级名称 -
.selected_answer1 - 第一个空格
.selected_answer2 - 第二个空格
.fillinblank_button - 提交按钮
Jsfiddle链接 - https://jsfiddle.net/vaishuk/ajmuse3v/
PS - 我想用jquery做这个，而不是js。
谢谢。
1 个答案:
答案 0 :(得分：1)
我在drop: function(event, ui){}
＆＃13;
＆＃13;
＆＃13;
＆＃13;
jQuery(document).ready(function() {
// This code used for set order attribute for items
var numberOfItems = jQuery("#options").find(".drag-text").length;
jQuery.each(jQuery("#options").find(".drag-text"), function(index, item) {
jQuery(item).attr("order", index);
var removeBotton = jQuery('<i class="fa fa-times cancel_btn" style="display:none"></i>');
removeBotton.click(function(){
addToOlderPlace(jQuery(this).parent());
});
jQuery(item).append(removeBotton);
});
jQuery('.selected_answer1, .selected_answer2').droppable({
accept: ".drag-text",
drop: function(event, ui) {
//jQuery(".fillinblank_button").attr("disabled",false);
// Check for existing another option
if(jQuery(this).find(".drag-text").length > 0)
addToOlderPlace(jQuery(this).find(".drag-text"));
jQuery(ui.draggable).find("i").attr("style","");
jQuery(this).append(jQuery(ui.draggable));
if(jQuery('.selected_answer1').html().length > 0 && jQuery('.selected_answer2').html().length > 0){
jQuery('.fillinblank_button').prop('disabled', false);
}
else{
jQuery('.fillinblank_button').prop('disabled', true);
}
}
});
jQuery(".drag-text").draggable({
helper:"clone",
revert: "invalid"
});
// This function used for find old place of item
function addToOlderPlace(jQueryitem) {
var indexItem = jQueryitem.attr("order");
var itemList = jQuery("#options").find(".drag-text");
jQueryitem.find("i").hide();
if (indexItem === "0")
jQuery("#options").prepend(jQueryitem);
else if (Number(indexItem) === (Number(numberOfItems)-1))
jQuery("#options").append(jQueryitem);
else
jQuery(itemList[indexItem - 1]).after(jQueryitem);
}
})
jQuery(document).ready(function() {
jQuery('.fillinblank_button').click(function() {
if (jQuery('.selected_answer1').find('#ca-one')) {
jQuery('.selected_answer1 #ca-one').css({'color':'#0d9f3e'});
jQuery('.selected_answer2 #ca-two').css({'color':'#0d9f3e'});
jQuery('.answer_section').slideDown();
jQuery(".drag-text").draggable({ disabled: true });
jQuery('.selected_answer1, .selected_answer2').find('i').hide();
jQuery('span.selected_answer1').css({'color':'#f73c55'});
jQuery('span.selected_answer2').css({'color':'#f73c55'});
//alert('right selected');
}
});
});
/*
jQuery(document).ready(function() {
jQuery('.fillinblank_button').prop('disabled', true);
jQuery('.selected_answer1, .selected_answer2').on('drop', function () {
if(jQuery(this).val() != '') {
alert('dropped')
jQuery('.fillinblank_button').prop('disabled', false);
}
});
});
*/
jQuery(document).ready(function () {
jQuery('.selected_answer1' && '.selected_answer2').on('drop change', function (event, ui){
});
});/*===== activity ======*/
.aat_common .actiity_main { width: 100%; display: inline-block; padding:25px; box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.57);border-radius: 7px; border-bottom: 9px solid #2a9af3; }
.aat_common .actiity_main .activity_heading { width: 100%; display: inline-block; background-color: #f3f4f6; padding: 22px 20px; margin-bottom: 30px; }
.aat_common .actiity_main .activity_heading h2 { padding-left:20px; font-size:14px; text-transform: uppercase; position: relative; font-family: 'Open Sans', sans-serif; font-weight: 600; color:#3b3a3c; margin-top: 0; }
.aat_common .actiity_main .activity_heading h2:before {position: absolute; top: 18%; left: 0; content: ""; width: 10px; height: 10px; background-color: #67cb50; border-radius: 50%; }
.aat_common .actiity_main .activity_heading p { font-size: 16px; color:#a3a3a3; position: relative; padding-left: 28px; margin-bottom: 0px; }
.aat_common .actiity_main .activity_heading p:before {position: absolute; top: 0; left: 0; content:url('../../../content/lessons/72/images/tip-arrow.png'); }
.aat_common .actiity_main .activity_select {width: 100%; display: inline-block; }
.aat_common .actiity_main .activity_select p { font-weight: bold; color:#252327; }
.aat_common .actiity_main .activity_select .answer_select {width: 100%; padding: 0px 25px; }
.aat_common .actiity_main .activity_select .tf_answer { padding: 0px 25px 0px 0px !important; }
.aat_common .actiity_main .activity_select .answer_select label {font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 600; margin-bottom: 12px; }
.aat_common .actiity_main .activity_select .tf_answer label { margin-bottom: 5px !important; }
.containerr {display: inline-block; position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.containerr input {position: absolute;opacity: 0;cursor: pointer;}
.checkmark1, .true-false1 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.checkmark2, .true-false2 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.checkmark3, .true-false3 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.checkmark4, .true-false4 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.checkmark5, .true-false5 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.checkmark6, .true-false6 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.checkmark7, .true-false7 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.checkmark8, .true-false8 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.true-false9 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.true-false10 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.true-false11 {position: absolute;top: 22%;left: 0;height: 13px;width: 13px; border-radius: 50%; border:2px solid #5e5f60;}
.true-false12 {position: absolute;top: 39%;left: 4px;height: 5px;width: 5px; border-radius: 50%; }
.containerr input:checked ~ .checkmark1, .containerr input:checked ~ .true-false1 {border:2px solid #2196f3;}
.containerr input:checked ~ .checkmark2, .containerr input:checked ~ .true-false2 {background-color: #2196f3;}
.containerr input:checked ~ .checkmark3, .containerr input:checked ~ .true-false3 {border:2px solid #2196f3;}
.containerr input:checked ~ .checkmark4, .containerr input:checked ~ .true-false4 {background-color: #2196f3;}
.containerr input:checked ~ .checkmark5, .containerr input:checked ~ .true-false5 {border:2px solid #2196f3;}
.containerr input:checked ~ .checkmark6, .containerr input:checked ~ .true-false6 {background-color: #2196f3;}
.containerr input:checked ~ .checkmark7, .containerr input:checked ~ .true-false7 {border:2px solid #2196f3;}
.containerr input:checked ~ .checkmark8, .containerr input:checked ~ .true-false8 {background-color: #2196f3;}
.containerr input:checked ~ .true-false9 {border:2px solid #2196f3;}
.containerr input:checked ~ .true-false10 {background-color: #2196f3;}
.containerr input:checked ~ .true-false11 {border:2px solid #2196f3;}
.containerr input:checked ~ .true-false12 {background-color: #2196f3;}
.checkmark_button { width: 135px; background-color: #2a9af3; text-align:center; color:#a3a3a3; color:#fff; padding: 17px 0px; font-size: 17px; font-family: 'Open Sans', sans-serif; font-weight: 600; margin-left: 4%; margin-top: 20px; transition: .5s ease-in-out; cursor: pointer; }
.tf_button { cursor: default !important; outline:none; width: 135px; background-color: #f3f4f6; text-align:center; color:#a3a3a3; padding: 17px 0px; font-size: 17px; font-family: 'Open Sans', sans-serif; font-weight: 600; margin-left: 4%; margin-top: 20px; transition: .5s ease-in-out;}
.fillinblank_button { width: 135px; background-color: #2a9af3; text-align:center; color:#a3a3a3; color:#fff; padding: 17px 0px; font-size: 17px; font-family: 'Open Sans', sans-serif; font-weight: 600; margin-left: 4%; margin-top: 20px; transition: .5s ease-in-out; cursor: pointer; }
.aat_common .actiity_main .answer_section {width: 100%; display: inline-block; display: none; }
.aat_common .actiity_main .answer_section h2 { color: #17b045; font-size: 16px;font-family: 'Open Sans', sans-serif;font-weight: 600;}
.aat_common .actiity_main .answer_section h3 {font-size: 17px !important; font-family: 'Open Sans', sans-serif;font-weight: 600; color:#505152; }
.aat_common .actiity_main .answer_section ol li,
.aat_common .actiity_main .answer_section ul li { list-style-type: upper-latin; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #818282; }
.aat_common .actiity_main .tf_answer ol li,
.aat_common .actiity_main .tf_answer ul li { margin-top:20px; list-style-type: upper-latin; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 600; }
.aat_common .actiity_main .answer_section .b-col ol li { color: #252327 !important; margin-top: 0px !important;}
.checkmark_disable {background-color: #f3f4f6 !important; color:#a3a3a3 !important; cursor: default;}
.checkmark_enable { background-color: #2a9af3 !important; color:#fff !important; cursor: pointer !important; }
/*.tolerance_calculation*/
.aat_common .actiity_main .activity_select .drag-dropp { width: 100%; }
.aat_common .actiity_main .activity_select .drag-dropp ul { color:#252327; }
.aat_common .actiity_main .activity_select .drag-dropp ul li { list-style-type: decimal; color:#252327; position: relative;}
.aat_common .actiity_main .activity_select .drag-dropp ul li p { color:#252327; margin: 0px 0px 10px;}
.aat_common .actiity_main .activity_select .drgable-content ul {padding-left: 50px; }
.aat_common .actiity_main .activity_select .drgable-content ul li { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 16px; line-height: 20px !important; }
.selected_answer1 {position: absolute; top: 0; left: 20%; width: 160px; height: 28px; border-bottom: 1px solid #959595; text-align: center; color:#565657; }
.selected_answer2 {position: absolute; top: 0; left: 53%; width: 160px; height: 28px; border-bottom: 1px solid #959595; text-align: center; color:#565657; }
.selected_answer3 { display: inline-block; width: 160px; height: 28px; border-bottom: 1px solid #959595; text-align: center; color:#565657; }
.spacing_text {position: absolute; top: 0; left: 43%; color:#252327; }
.options p { width: 100%; }
.cancel_btn { margin-left: 10px;}
.selectedd {color:#0d9f3e !important;}
.aat_common .actiity_main .activity_select .drgable-content .drag-text { width: 200px; padding-left:40px; margin: 0px 0px 10px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 16px !important; position: relative; color:#565657; }
.aat_common .actiity_main .activity_select .drgable-content .drag-text:before {width:7px; height:7px; border-radius: 50%; background-color:#565657; position: absolute; content:""; top: 35%; left: 5%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="aat_common">
<div class="actiity_main">
<div class="activity_heading">
<h2>FILL IN THE BLANK QUESTION</h2>
<p>Tip - Complete the sentences below by dragging the correct answer from the options given</p>
</div>
<div class="activity_select">
<p>Which ONE of the following statements is a benefit to the shareholders of a limited company?</p>
<div class="drag-dropp">
<ul start="1">
<li><p>A sole trader has<span class="selected_answer1 ui-droppable" id="enable-true1"></span> <span class="spacing_text">to prepare annual accounts by a certain date.</span></p></li>
<li><p>A charity is managed on a day-to-day basis by its <span class="selected_answer2 ui-droppable" id="enable-true1"></span> </p></li>
</ul>
</div>
<div class="drgable-content">
<div id="options">
<div class="drag-text ui-draggable ui-draggable-handle" id="ca-one" order="0">A requirement<i class="fa fa-times cancel_btn" style="display:none"></i></div>
<div class="drag-text ui-draggable ui-draggable-handle" order="1">No requirement<i class="fa fa-times cancel_btn" style="display:none"></i></div>
<div class="drag-text ui-draggable ui-draggable-handle" id="ca-two" order="2">Trustees<i class="fa fa-times cancel_btn" style="display:none"></i></div>
<div class="drag-text ui-draggable ui-draggable-handle" order="3">Directors<i class="fa fa-times cancel_btn" style="display:none"></i></div>
<div class="drag-text ui-draggable ui-draggable-handle" order="4">Shareholders<i class="fa fa-times cancel_btn" style="display:none"></i></div>
</div>
</div>
<button class="fillinblank_button" type="submit" value="Submit" disabled="">Submit</button>
<div class="answer_section">
<h2>Answer</h2>
<ol start="1">
<li>Although a sole trader has no specified submission deadlines in the way that a limited company does, the final accounts must be prepared in sufficient time to allow the owner to complete their personal tax return by the deadline.</li>
<li>A charity is run on a day-to-day basis by the trustees appointed.</li>
</ol>
</div>
</div>
</div>
<!--
<script>
jQuery(document).ready(function() {
jQuery('.drag-text').draggable();
jQuery('.selected_answer1' && '.selected_answer2').droppable({
drop: function() {
alert('dropped');
jQuery('.fillinblank_button').prop("disabled", false);
}
});
});
</script>
-->
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？