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

How can I apply CSS to a link if at least one input is not original, and undo that change if all inputs are original?

本文关键字：如果 原始 输入 何撤销 有一个 应用于 CSS 链接      更新时间：2023-09-26

我的页面上有一堆复选框、单选按钮和文本字段。它们都在id后面附加了'_boom'。我想检测这些输入中的任何一个是否不是其原始值，如果是，则将CSS应用于页面上名为"save"的按钮。然后，如果用户恢复了他们所做的任何更改，并且所有输入都具有原始值，那么我希望撤消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>

您的代码中有许多可能的改进，以使其更清晰和标准化。比如，不要依赖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>

问题是，当其中一个值改变为原始值时，并不意味着没有变化。
所以，在你的else代码块中，你应该检查所有的输入，如果它们都是原始值，从按钮中删除'save'类，否则，保留它。

var isChanged = function ($element) {
    var sType = $element.prop('type');
    if (sType === "checkbox" || sType === "radio") {
        var originalCheckedState = $element.prop("defaultChecked");
        var currentCheckedState = $element.prop("checked"); 
        if (currentCheckedState !== originalCheckedState) {
            return true;
        } else {
            return false;
        }
    } else if( sType === "text" ) {
        var originalValue = $element.prop("defaultValue");
        var currentValue = $element.val();
        if (currentValue !== originalValue) {
            return true;
        } else {
            return false;
        }
    }
};
var $inputs = $('[id*="_boom"]');
var isAnyChanged = function () {
    $inputs.each(function () {
         if (isChanged($(this))) {
             return true;
         }
    });
    return false;
};
$inputs.change(function () {
    if (isChanged($(this))) {
         $("a#save").css("color","#CCCCCC"); 
    } else if (!isAnyChanged()) {
         $("a#save").css("color","black"); 
    }
});
相关文章：