相当简单的JQuery输入选择位置问题

Fairly easy JQuery Input Selection location problem

本文关键字:选择 位置 问题 输入 JQuery 简单      更新时间:2023-09-26

我在将JQuery javascript代码应用于它应该应用的选择框元素时遇到了问题。问题是选择框没有遵循javascript代码中指定的操作。它们只是保持禁用和选中状态(参见下面的代码),而不是根据第一个复选框的选择进行更改。

我认为如何在javascript代码中指定选择框的位置是个问题,但我不知道如何解决它。再说一遍,我可能也错了。

如果你对此有任何见解或可以更正代码,请这样做!干杯


HTML:

<div class="medium_box">
    <form name="searchform" class="FECKsearch" method="get" onSubmit="return dosearch();">
        <input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
        <input type="submit" name="searchsubmit" class="button" value="Go" />
        <span class="searcher">International: <input type="checkbox" id="International" checked="yes"></input></span>
        <span class="searcher1">Americas: <input type="checkbox" id="Americas" disabled checked="yes"></input></span>
        <span class="searcher1">Europe: <input type="checkbox" id="Europe" disabled checked="yes"></input></span>
        Asia: <input type="checkbox" id="Asia" disabled checked="yes"></input>
    </form> 
</div>

Javascript:

$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
    $('#Americas').attr('checked', 'checked');
    $('#Americas').attr('disabled', 'disabled');
    $('#Europe').attr('checked', 'checked');
    $('#Europe').attr('disabled', 'disabled');
    $('#Asia').attr('checked', 'checked');
    $('#Asia').attr('disabled', 'disabled');
}
else {
    paramChangeBoxes.removeAttr('disabled');
    $('#Americas').removeAttr('disabled');
    $('#Europe').removeAttr('disabled');
    $('#Asia').removeAttr('disabled');
    }
});

更新&解决方案:

为代码$('#International').live("click",function() {为John欢呼,该代码纠正了JQuery代码不起作用的错误。显然,如果您从远程文件导入代码,则必须在代码中包含"活动"部分。

再次感谢约翰!

$('#International').live("click",function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
    $('#Americas').attr('checked', 'checked');
    $('#Americas').attr('disabled', 'disabled');
    $('#Europe').attr('checked', 'checked');
    $('#Europe').attr('disabled', 'disabled');
    $('#Asia').attr('checked', 'checked');
    $('#Asia').attr('disabled', 'disabled');
}
else {
    paramChangeBoxes.removeAttr('disabled');
    $('#Americas').removeAttr('disabled');
    $('#Europe').removeAttr('disabled');
    $('#Asia').removeAttr('disabled');
    }
});

对于动态内容(页面加载后包含和元素dom创建),请使用live。祝你今天愉快

有很大的空间来收紧以下代码,但它是有效的:

$('#International').click(function() {
    var paramChangeBoxes = $('input:checkbox');
    if ($(this).is(':checked')) {
        if (!$('#Americas').is(':checked')) {
            $('#Americas').click();
        }
        $('#Americas').attr('disabled', 'disabled');
        if (!$('#Europe').is(':checked')) {
            $('#Europe').click();
        }
        $('#Europe').attr('disabled', 'disabled');
        if (!$('#Asia').is(':checked')) {
            $('#Asia').click();
        }
        $('#Asia').attr('disabled', 'disabled');
    } else {
        paramChangeBoxes.removeAttr('disabled');
        $('#Americas').removeAttr('disabled');
        $('#Europe').removeAttr('disabled');
        $('#Asia').removeAttr('disabled');
    }
});