Question

我有一个按钮，按钮可以有两个标签 - 激活和取消激活。如果我单击按钮，则按钮标签互换，即如果我单击按钮并且当前文本为Activate，则文本切换为Deactivate，反之亦然。我想在这个按钮点击一次做两件事 -

我有一个名为IsMandatory的复选框。当我点击按钮时，如果它从Activate更改为Deactivate，则IsMandatory复选框将被禁用，反之亦然。
同时，如果禁用Ismandatory复选框，则将取消选中该复选框。如果该复选框已启用，则会进行检查。

我怎样才能实现这一点？

到目前为止，我已经这样做了：

<input type="hidden" id="stat" data-bind="value:IsActive" />
<input type="button" id="butt" onclick="change();" />

<input type="hidden" id="stat2" data-bind="value: IsMandatory" />
<input type="checkbox" id="chckbox" data-bind="checked: IsMandatory" />

<script type="text/javascript">

$(function () {


    var stat = document.getElementById("stat").value;
    var stat2 = document.getElementById("stat2").value;
    //alert(stat);

    if (stat == 1) {

        document.getElementById("butt").value = "Activate";
        document.getElementById("chckbox").disabled = false;
        document.getElementById("chckbox").checked = true;
        stat2 = 1;

    }
    else {
        document.getElementById("butt").value = "Deactivate";
        document.getElementById("chckbox").disabled = true;
        document.getElementById("chckbox").checked = false;
        stat2 = 0;

    }

    //if (stat2 == 1)
    //{

    //    document.getElementById("chckbox").checked = false;
    //}
    //else
    //{

    //   document.getElementById("chckbox").disabled = true;
    //}


});


function activeStatus(IsActive) {

    //alert(ActiveStatus);
    if (IsActive == 1) {
        //document.getElementById("chckbox").disabled = false;
        return "Activate";
    }
    else {
        //document.getElementById("chckbox").disabled = true;
        return "Deactivate";
    }
}

function change() {

    var butt = document.getElementById("butt").value;

    if (butt == 'Deactivate') {
        document.getElementById("butt").value = "Activate";
        document.getElementById("chckbox").disabled = false;
        document.getElementById("chckbox").checked = true;
        document.getElementById("stat").value = 1;
        document.getElementById("stat2").value = 1;


    }

    else {
        document.getElementById("butt").value = "Deactivate";
        document.getElementById("chckbox").disabled = true;
        document.getElementById("chckbox").checked = false;
        document.getElementById("stat").value = 0;
        document.getElementById("stat2").value = 0;



    }




}


</script>

EDIT-1：其他JavaScript代码：

var urlInputConfiguration = "/InputConfiguration";

var url = window.location.pathname;
var Id = url.substring(url.lastIndexOf('/') + 1);


$(function () {

$.ajaxSetup({
    // Disable caching of AJAX responses
    cache: false
});



var InputConfiguration = function (InputConfiguration) {
    var self = this;
    self.Id = ko.observable(InputConfiguration ? InputConfiguration.Id : 0).extend({ required: true });
    self.SectionName = ko.observable(InputConfiguration ? InputConfiguration.SectionName : '');
    self.SectionText = ko.observable(InputConfiguration ? InputConfiguration.SectionText : '');
    self.IsActive = ko.observable(InputConfiguration ? InputConfiguration.IsActive : 1);
    self.IsMandatory = ko.observable(InputConfiguration ? InputConfiguration.IsMandatory : 1);



};

var InputConfigurationCollection = function () {
    var self = this;

    //if ProfileId is 0, It means Create new Profile
    if (Id == 0) {
        self.InputConfiguration = ko.observable(new InputConfiguration());
    }
    else {
        $.ajax({
            url: urlInputConfiguration + '/GetInputConfigurationById/' + Id,
            async: false,
            dataType: 'json',
            success: function (json) {
                self.InputConfiguration = ko.observable(new InputConfiguration(json));
            }
        });
    }

    self.InputConfigurationErrors = ko.validation.group(self.InputConfiguration());





    self.saveInputConfiguration = function () {

        //self.Country = ko.observable(new Country());

        var isValid = true;

        if (self.InputConfigurationErrors().length != 0) {
            self.InputConfigurationErrors.showAllMessages();
            isValid = false;
        }

        // alert(JSON.stringify(ko.toJS(self.Country())));





        if (isValid) {

            //self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;
            self.InputConfiguration().IsActive = document.getElementById("stat").value;


            var activevalue = self.InputConfiguration().IsActive;

            if (activevalue == 1)
            {
                document.getElementById("chckbox").disabled = false;
                //document.getElementById("chckbox").checked = true;
                self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;



            }

            else
            {
                document.getElementById("chckbox").disabled = true;
                //document.getElementById("chckbox").checked = false;
                self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;



            }

            $.ajax({
                type: (Id > 0 ? 'PUT' : 'POST'),
                cache: false,
                dataType: 'json',
                url: urlInputConfiguration + (Id > 0 ? '/UpdateInputConfigurationInformation?id=' + Id : '/SaveInputConfigurationInformation'),
                data: JSON.stringify(ko.toJS(self.InputConfiguration())),
                contentType: 'application/json; charset=utf-8',
                async: false,
                success: function (data) {
                    alert("Case Input Configuration saved successfully.");
                    window.location.href = '/InputConfiguration';
                },
                error: function (err) {
                    var err = JSON.parse(err.responseText);
                    var errors = "";
                    for (var key in err) {
                        if (err.hasOwnProperty(key)) {
                            errors += key.replace("InputConfiguration.", "") + " : " + err[key];
                        }
                    }
                    $("<div></div>").html(errors).dialog({ modal: true, title: JSON.parse(err.responseText).Message, buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
                },
                complete: function () {
                }
            });
        }
    };
};


var InputConfigurationsViewModel = function () {
    var self = this;
    var url = "/InputConfiguration/GetAllInputConfiguration";
    var refresh = function () {
        $.getJSON(url, {}, function (data) {
            self.InputConfigurations(data);
        });
    };

    // Public data properties
    self.InputConfigurations = ko.observableArray([]);

    // Public operations
    self.createInputConfiguration = function () {
        window.location.href = '/InputConfiguration/InputConfigurationCreateEdit/0';
    };

    self.editInputConfiguration = function (inputConfiguration) {
        //alert(country.CountryID);
        window.location.href = '/InputConfiguration/InputConfigurationCreateEdit/' + inputConfiguration.Id;
    };
    self.removeInputConfiguration = function (inputConfiguration) {

        // First remove from the server, then from the UI
        if (confirm("Are you sure you want to delete this profile?")) {

            var id = customerProfileConfiguration.Id;
            $.ajax({ type: "DELETE", url: 'InputConfiguration/DeleteInputConfiguration/' + id })
                .done(function () { self.CustomerProfileConfigurations.remove(inputConfiguration); });
        }
    }
    refresh();




};

ko.applyBindings(new InputConfigurationsViewModel(), document.getElementById("inputconfigurationlist"));
ko.applyBindings(new InputConfigurationCollection(), document.getElementById("inputconfiguration_edit"));
});

var clone = (function () {
    return function (obj) {
        Clone.prototype = obj;
        return new Clone()
    };
function Clone() { }
}());

我无法绑定IsMandatory的值，但是当我单击按钮时，选中/取消选中以及启用/禁用工作正常。此外，当我的按钮文本为Activate时，IsActive值被绑定为1，当我的按钮文本为Deactivate时，IsActive值被绑定为0.当选中复选框时，IsMandatory值应为1，当取消选中复选框时，IsMAndatory值应该是0.

Answer 1

绑定必须用武力，我试图使用淘汰赛，但这实际上并没有帮助。

首先，当我得到按钮值而不点击它时，通过使用document.getElementById并将其保持在变量stat中，我必须确保如果stat = 1，那么另一个变量stat2具有复选框中的值也变为1。接下来，当stat2 = 1时，将选中复选框。当stat = 0时，在else语句中完成了类似的事情。所以现在stat2 = 0，并且取消选中复选框。

if (stat == 1)
{

    document.getElementById("butt").value = "Activate";
    document.getElementById("chckbox").disabled = false;
    stat2 = 1;
    if (stat2 == 1) {

        document.getElementById("chckbox").checked = true;
    }
    else {

        document.getElementById("chckbox").disabled = false;
    }

}
else
{
    document.getElementById("butt").value = "Deactivate";
    document.getElementById("chckbox").disabled = true;
    stat2 = 0;

    if (stat2 == 0) {

        document.getElementById("chckbox").checked = false;
    }
        else {

            document.getElementById("chckbox").disabled = true;
        }

 }

接下来，更改将包含在函数change（）中。这意味着当我单击按钮时，将调用change（）函数。在其中，我必须确保如果Deactivate变为Activate，则document.getElementById（“stat2”）。value变为1，如果为1，则应选中复选框。如果我们从Activate更改为Deactivate，则会发生反向。

function change() {

    var butt = document.getElementById("butt").value;

    if (butt == 'Deactivate')
    {
        document.getElementById("butt").value = "Activate";
        document.getElementById("chckbox").disabled = false;
        document.getElementById("stat").value = 1;
        document.getElementById("stat2").value = 1;

        if ((document.getElementById("stat2").value) == 1)
        {
            document.getElementById("chckbox").checked = true;
        }

        else
        {
            document.getElementById("chckbox").checked = false;
        }



    }

    else
    {
        document.getElementById("butt").value = "Deactivate";
        document.getElementById("chckbox").disabled = true;
        document.getElementById("chckbox").checked = false;
        document.getElementById("stat").value = 0;
        document.getElementById("stat2").value = 0;

        if ((document.getElementById("stat2").value) == 0)
        {
            document.getElementById("chckbox").checked = false;
        }

        else
        {
            document.getElementById("chckbox").checked = true;
        }


    }

}

最后，我强制将我的IsMandatory属性中的复选框的值绑定到我的js文件中。 IsMandatory属性是我在视图模型中为复选框声明的属性。 IsActive是按钮的属性。每当IsActive为1时，我启用复选框，然后使用document.getElementById从我的复选框中取值。如果checkbox = 1的值，则IsMandatory变为1，否则IsMandatory变为0。

self.InputConfiguration().IsActive = document.getElementById("stat").value;
self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;


var activevalue = self.InputConfiguration().IsActive;
var check = self.InputConfiguration().IsMandatory;


if (activevalue == 1)
{
    document.getElementById("chckbox").disabled = false;
    //document.getElementById("chckbox").checked = true;


    check = 1;
    if (check == 1) {
        self.InputConfiguration().IsMandatory = 1;
    }

    else
    {
        self.InputConfiguration().IsMandatory = 0;
    }
}

else
{
    document.getElementById("chckbox").disabled = true;
    check = 0;
    //document.getElementById("chckbox").checked = false;

    if (check == 0) {
        self.InputConfiguration().IsMandatory = 0;
    }

    else
    {
        self.InputConfiguration().IsMandatory = 1;
    }

}

复选框启用/禁用并选中/取消选中，并通过单击按钮更改按钮文本更改

1 个答案: