javascript - 如果至少有一个输入不是原始输入，我如何将 CSS 应用于链接，如果所有输入都是原始输入，如何撤消该更改？

Question

我的页面上有一堆复选框、单选按钮和文本字段。他们都在 id 的末尾附加了“_boom”。我想检测这些输入中的任何一个是否不是其原始值，如果是，则将 CSS 应用于页面上名为“保存”的按钮。然后，如果用户恢复他们所做的任何更改并且所有输入都有其原始值，我想撤消 CSS。

我已经接近下面的代码。但是假设我选中了 3 个复选框。选中第一个框后，CSS 会发生变化。好的!我选中第二个和第三个框。 CSS 保持不变。好的!但是后来我取消选中其中一个框，然后 CSS 恢复。坏的!只有在我撤消所有更改时，CSS 才应该恢复。

$('[id*="_boom"]').change(function() {
        var sType = $(this).prop('type'); //get the type of attribute we're dealing with
        if( sType === "checkbox" || sType === "radio" ){ //checkbox or radio type
            var originalCheckedState = $(this).prop("defaultChecked");
            var currentCheckedState = $(this).prop("checked"); 

            if(currentCheckedState !== originalCheckedState){
                $("a#save").css("color","#CCCCCC"); 
            }
            else {
                $("a#save").css("color","black"); 
            }
        }

        if( sType === "text" ){ //text type
            var originalValue = $(this).prop("defaultValue");
            var currentValue = $(this).val();

            if(currentValue !== originalValue){
                $("a#save").css("color","#CCCCCC"); 
            }
            else {
                $("a#save").css("color","black"); 
            }
        }

    }); 

#save {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="check_boom" />
<input type="checkbox" id="check1_boom" />
<input type="checkbox" id="check2_boom" />
<input type="radio" id="radio_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<input type="text" defaultValue="test" id="text2_boom" />
<a href="http://www.google.com" id="save">Save</a>

Answer 1

您的代码有许多可能的改进，以使其更清晰和标准化。诸如而不是依赖 id 你应该考虑 class 属性和所有......但我不会修改你的代码。这是您现有代码的解决方案。

想法是遍历所有表单元素，如果至少有一个元素与其默认值不同，则设置标志并退出循环。

最后，检查该标志并相应地设置 css。

为此，我已将您的元素包含在表单 form1 中。

$("#form1 :input").change(function() {
        var changed = false;
        formElems = $("#form1 :input");

        for(i=0;i<formElems.length; i++){
        var sType = $(formElems[i]).prop("type");
            if(sType === "checkbox" || sType === "radio"){
                if($(formElems[i]).prop("defaultChecked") !== $(formElems[i]).prop("checked")){
                changed = true;
                break;
            }
            }else if(sType === "text"){
                if($(formElems[i]).prop("defaultValue") !== $(formElems[i]).val()){
                changed = true;
                break;
            }
            }
        }

    if(changed){
    $("a#save").css("color","#CCCCCC"); 
    }else{
    $("a#save").css("color","black"); 
    }
});

这是你的表格

<form id="form1">
<input type="checkbox" id="check_boom" />
<input type="checkbox" id="check1_boom" />
<input type="checkbox" id="check2_boom" />
<input type="radio" id="radio_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<input type="text" defaultValue="test" id="text2_boom" />
<a href="http://www.google.com" id="save">Save</a>
</form>