Question

我有一个单选按钮：

<input type="radio" name="editList" id="suc" value="S">Suc

如果我选择单选按钮，我将lst2禁用为：

 $('input:radio[name="editList"]')
                       .click(function () {
                           if ($(this).val() === "S") {
                               $('#lst2').prop('disabled', true);
                           } else {
                                $('#lst2').prop('disabled', false);
                           }
                       });

但是现在我想知道如果选择单选按钮，如何使用相同的lst1值自动更改lst2的值，如何进入onChange状态？

选择JS：

function getlst2(sender) {

  // sender: jQuery Object which called this method.
  sender.addClass("changed");
  $("#lst2").getJSONCatalog({
    url: 'https://demo9451608.mockable.io/getTest',
    valueProperty: "id",
    textProperty: "text"
  });
} 

$("#lst1").getJSONCatalog({
  url: 'https://demo9451608.mockable.io/getTest',
  valueProperty: "key",
  textProperty: "value",
  onChange: getlst2
});

注意：如果未选择收音机，您可以选择lst2值。

Demo

Answer 1

试试这个：

＆＃13;

$('input:radio[name="editList"]').change(function (e) {
                           if ($(this).is(':checked')) {
                               $('#lst2').prop('disabled', true); 
                             //set the value of lst1 to lst 2
                              $("#lst2").val($("#lst1").val());
                           } else {
                                $('#lst2').prop('disabled', true);
                           }
                           
                           
                       }); 
                       
                       $('#lst1').change(function (e) { 
                           if ($('input:radio[name="editList"]').is(':checked')) {
                               $('#lst2').prop('disabled', true); 
                             //set the value of lst1 to lst 2
                              $("#lst2").val($("#lst1").val());
                           } else {
                                $('#lst2').prop('disabled', true);
                           }
                           
                           
                       });
                       
                       (function($) {
  "use strict";

  $.fn.getJSONCatalog = function(options) {
   

    try {

      var self = this;

      var defaults = {
        url: null,
        headers: {},
        crossDomain: false,
        method: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        valueProperty: "",
        textProperty: "",
        dataExtended: null,
        selectedValue: null,
        assignWithoutProperties: false,
        appendDefaultFirstOption: true,
        defaultFirstOptionValue: "",
        defaultFirstOptionText: "-- Seleccione una Opción --",
        defaultFirstOptionDisabled: false,
        isChosenSelect: false,
        onChange: null,
        oneChange: null,
        onSuccess: function() {
          return false;
        },
        messageText: "Get JSON Catalog",
        list: null,
        devMode: false
      };

      var settings = $.extend(defaults, options);

      var appendOptions = function(optionsList) {

        var isChosenSelect = settings.isChosenSelect === true ? true : null;

        if (isChosenSelect) {
          self.chosen("destroy");
        }

        self.empty();

        if (settings.appendDefaultFirstOption === true) {
          self.append($("<option>", {
            value: settings.defaultFirstOptionValue,
            text: settings.defaultFirstOptionText,
            disabled: settings.defaultFirstOptionDisabled === false ? false : true
          }));
        }

        if (optionsList) {

          $.each(optionsList, function() {

            var optionObj;

            if (settings.assignWithoutProperties === false) {

              var hasProperties = {
                value: this[settings.valueProperty],
                text: this[settings.textProperty]
              };

              optionObj = hasProperties;

            } else if (settings.assignWithoutProperties === true) {

              var noProperties = {
                value: this,
                text: this
              };

              optionObj = noProperties;

            }

            if (optionObj) {

              var $option = $("<option>", optionObj);

              if (settings.dataExtended) {
                $option.attr("data-extended", this[settings.dataExtended]);
              }

              self.append($option);
            }

          });

          if (settings.selectedValue) {

            self.val(settings.selectedValue);

            $("option", self).filter(function() {
              return this.value === settings.selectedValue;
            }).prop("selected", true);

          }

          if (settings.onChange) {
            self.on("change", function() {
              settings.onChange(self);
            });
          }

          if (settings.oneChange) {
            self.one("change", function() {
              settings.oneChange(self);
            });
          }

        }

        if (isChosenSelect) {
          self.chosen({
            placeholder_text_single: "-- Seleccione una opción --",
            placeholder_text_multiple: "-- Seleccione múltiples opciones --",
            width: "100%"
          });
        }

      }

      var successfulResponse = function(data) {
        appendOptions(data);
        settings.onSuccess(data);
      };

      if (settings.url) {

        $.ajax({
          method: settings.method,
          dataType: settings.dataType,
          cache: false,
          url: settings.url,
          headers: settings.headers,
          crossDomain: settings.crossDomain,
          contentType: settings.contentType,
          beforeSend: function() {
            // Add hooks before sending data
          },
          success: function(data) {
            if (settings.devMode === true) console.log(data);
            successfulResponse(data);
          },
          failure: function(jqXhr) {
            //console.log("Estatus " + jqXhr.status + ". Error: " + jqXhr.statusText);
          },
          error: function(jqXhr) {
            //console.log("Estatus " + jqXhr.status + ". Error: " + jqXhr.statusText);
          },
          complete: function() {
            //Add complete hooks
          }
        });

      } else if (settings.list) {
        if (settings.devMode === true) console.log(settings.list);
        successfulResponse(settings.list);
      }

    } catch (e) {
      // console.log(e);
    }

    return undefined;
  }

}(jQuery));

                       
                

  // sender: jQuery Object which called this method.

  $("#lst2").getJSONCatalog({
    url: 'https://demo9451608.mockable.io/getTest',
    valueProperty: "id",
    textProperty: "value"
  });


$("#lst1").getJSONCatalog({
  url: 'https://demo9451608.mockable.io/getTest',
  valueProperty: "key",
  textProperty: "value",
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="editList" id="suc" value="S">Suc

<select id="lst1"></select>
<select id="lst2"></select>

＆＃13;

Answer 2

您可以使用复选框＆＃34;如果以后需要更改值＆＃34;。一个纯粹的JavaScript解决方案如下。

function handleClick(cb) {
if(cb.checked){
 document.getElementById('secondOption').disabled = true;
}
 else {
 document.getElementById('secondOption').disabled = false;
 document.getElementById('secondOption').value = "default";
}
}

 function check() {
   var checkBox = document.getElementById('secondOption').disabled;
   var selectedValue = document.getElementById('firstOption').value;
   var element = document.getElementById('secondOption');
       if(checkBox) {
element.value = selectedValue;
 }
}

一名工作人员Demo

Answer 3

很抱歉，也许你可以更好地解释自己，这很难理解你。

答案种类
jQuery存在change事件，只需在jQuery对象上使用change（callbackFunction）函数。在更改回调函数中，“this”变量是已更改的对象注意：使用单选按钮，可以为每个更改项目多次触发更改事件，因此检查状态很重要。
只需在jQuery对象上使用val（）函数获取值。

如果选择单选按钮，则更改所选值

3 个答案: