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

Question

我在将 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');

    }
});

---

更新和解决方案：

为 John 的代码干杯 $('#International').live("click",function () { 纠正了 JQuery 代码无法运行的错误。显然，如果您从远程文件导入代码，则必须在编码中包含“实时”部分。

再次感谢约翰！

Answer 1

$('#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。
祝你今天过得愉快

Answer 2

下面的代码还有很大的空间可以加强，但它是有效的：

$('#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');
    }
});