我从下一步按钮中删除禁用的类,当两个单选按钮都被选中时,它工作正常,但问题是当我重新加载页面时,两个单选按钮仍然被检查但下一步中的禁用类不会触发。无论如何,它使工作onload?jQuery检测是否在加载时选择了单选按钮
class="SelectMarital" id="marital1" type="radio" name="marital" value="1"/>
class="SelectMarital" id="marital2" type="radio" name="marital" value="2"/>
class="SelectPrice" id="price1" type="radio" name="price" value="1"/>
class="SelectPrice" id="price2" type="radio" name="price" value="2"/>
"#" id="salary" class="btn disabled">Next Step
$("input[type=radio]").change(function(){
if($('.SelectMarital').is(':checked') && $('.SelectPrice').is(':checked')) {
$("#salary").removeClass('disabled');
}else {
$("#salary").addClass('disabled');
}
});
任何人都可以帮忙吗?
3 回答
只是触发您change
处理您的页面完成后的.trigger()
功能加载:
$("input[type=radio]").change(function() {
if ($('.SelectMarital').is(':checked') && $('.SelectPrice').is(':checked')) {
$("#salary").removeClass('disabled');
} else {
$("#salary").addClass('disabled');
}
});
$(function(){
$("input[type=radio]").trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">script>
<input class="SelectMarital" id="marital1" type="radio" name="marital" value="1" checked/>
<input class="SelectMarital" id="marital2" type="radio" name="marital" value="2" />
<input class="SelectPrice" id="price1" type="radio" name="price" value="1" checked/>
<input class="SelectPrice" id="price2" type="radio" name="price" value="2" />
<a href="#" id="salary" class="btn disabled">Next Stepa>
你可以定义检查函数然后调用它在就绪功能,并且还当你连接喜欢你change
事件:
$(function(){
//First call for the load
checkRadioButtons();
//Second call for change event
$("input[type=radio]").change(checkRadioButtons);
});
$(function() {
checkRadioButtons();
$("input[type=radio]").change(checkRadioButtons);
});
var checkRadioButtons = function() {
if ($('.SelectMarital').is(':checked') && $('.SelectPrice').is(':checked')) {
$("#salary").removeClass('disabled');
} else {
$("#salary").addClass('disabled');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">script>
<input class="SelectMarital" id="marital1" type="radio" name="marital" value="1" checked/> Marital 1
<input class="SelectMarital" id="marital1" type="radio" name="marital" value="2" /> Marital 2
<br>
<input class="SelectPrice" id="price1" type="radio" name="price" value="1" checked/> Price 1
<input class="SelectPrice" id="price2" type="radio" name="price" value="2" /> Price 2
<br><br>
<a href="#" id="salary" class="btn disabled">Next Stepa>