为什么我的单选按钮列表会在列表中选择多个项目？

Question

我有两个单选按钮列表，允许选择每个列表中的多个项目。这些列表是从使用AJAX调用调用的API数据动态生成的。

如下图所示：

JavaScript和HTML代码：

＆＃13;

＆＃13;

	function listUnitOfMeasureSet_change() {
	  if (listUnitOfMeasureSet.value.toString().toLowerCase() === "new") {
	    $("#divNewTypeUnitContentHolder").html("");

	    callService("GET", g_WebServiceUnitsOfMeasureTypeUnitsURL, null, "json", function(jsonResult) {
	      if (jsonResult.Success) {
	        for (i = 0; i < jsonResult.UnitOfMeasureTypeList.length; i++) {
	          $("#divNewTypeUnitContentHolder").html($("#divNewTypeUnitContentHolder").html() + '<input type="radio" id="rblUnitOfMeasureType" value="' + jsonResult.UnitOfMeasureTypeList[i].ID + '" /> ' + jsonResult.UnitOfMeasureTypeList[i].Name + ' ' + jsonResult.UnitOfMeasureTypeList[i].Description + '<br />');
	        }
	      }
	    });

	    $("#divNewUnitOfMeasure").dialog("open");
	  }
	}

	$("#divNewUnitOfMeasureBaseUnit").dialog({
	  autoOpen: F,
	  modal: T,
	  title: "Unit Of Measure",
	  width: 600,
	  buttons: {
	    Next: function() {
	      $(this).dialog("close");
	      $("#divNewUnitOfMeasureRelatedUnits").dialog("open");

	      callService("GET", g_WebServiceUnitsOfMeasureRelatedUnitsGetAllByBaseUnitIDURL + '?BaseTypeID=' + $("input[type='radio'][id='rblUnitOfMeasureBaseUnit']:checked").val(), null, "json", function(jsonResult) {
	        if (jsonResult.Success) {
	          var data = {};

	          for (var i = 0; i < jsonResult.UnitOfMeasureRelatedUnitList.length; i++) {
	            var row = {};
	            row["UOMRelatedUnit_AddItem"] = F;
	            row["UOMRelatedUnit_Abbreviation"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Abbreviation;
	            row["UOMRelatedUnit_Active"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Active;
	            row["UOMRelatedUnit_ConversionOfBaseUnits"] = jsonResult.UnitOfMeasureRelatedUnitList[i].ConversionOfBaseUnits;
	            row["UOMRelatedUnit_DisplayOrder"] = jsonResult.UnitOfMeasureRelatedUnitList[i].DisplayOrder;
	            row["UOMRelatedUnit_ID"] = jsonResult.UnitOfMeasureRelatedUnitList[i].ID;
	            row["UOMRelatedUnit_Name"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Name;
	            row["UOMRelatedUnit_UnitOfMeasureBaseUnitID"] = jsonResult.UnitOfMeasureRelatedUnitList[i].UnitOfMeasureBaseUnitID;
	            data[i] = row;
	          }
	          var source = {
	            localdata: data,
	            datatype: "array",
	            datafields: [{
	              name: 'UOMRelatedUnit_ID',
	              type: 'string'
	            }, {
	              name: 'UOMRelatedUnit_AddItem',
	              type: 'bool'
	            }, {
	              name: 'UOMRelatedUnit_Name',
	              type: 'string'
	            }, {
	              name: 'UOMRelatedUnit_Abbreviation',
	              type: 'string'
	            }, {
	              name: 'UOMRelatedUnit_ConversionOfBaseUnits',
	              type: 'number'
	            }],
	            addrow: function(rowid, rowdata, position, commit) {
	              //Server Action
	              commit(T);
	            },
	            updaterow: function(rowid, newdata, commit) {
	              //Server Action
	              commit(T);
	            }
	          };
	          var dataAdapter = new $.jqx.dataAdapter(source);

	          $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid({
	            width: 500,
	            height: 200,
	            source: dataAdapter,
	            editable: T,
	            selectionmode: 'singlecell',
	            theme: 'energyblue',
	            showtoolbar: T,
	            rendertoolbar: function(toolbar) {
	              var me = this;
	              var container = $("<div style='margin: 5px;'></div>");
	              toolbar.append(container);
	              container.append('<input id="addUoMRelatedUnitsRowButton" type="button" value="Add New Row" />');
	              container.append('<input style="margin-left: 5px;" id="addUoMRelatedUnitsMultipleRowsButton" type="button" value="Add Multiple New Rows" />');
	              $("#addUoMRelatedUnitsRowButton").jqxButton();
	              $("#addUoMRelatedUnitsMultipleRowsButton").jqxButton();

	              // create new row.
	              $("#addUoMRelatedUnitsRowButton").on('click', function() {
	                $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('beginupdate');
	                var commit = $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('addrow', null, ['']);
	                $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('endupdate');
	              });

	              // create new rows.
	              $("#addUoMRelatedUnitsMultipleRowsButton").on('click', function() {
	                $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('beginupdate');
	                for (var i = 0; i < 5; i++) {
	                  var commit = $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('addrow', null, ['']);
	                }
	                $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('endupdate');
	              });
	            },
	            columns: [{
	              text: '',
	              editable: F,
	              datafield: 'UOMRelatedUnit_ID',
	              width: 0
	            }, {
	              text: 'Add',
	              editable: T,
	              datafield: 'UOMRelatedUnit_AddItem',
	              columntype: 'checkbox',
	              width: 40
	            }, {
	              text: 'Name',
	              editable: T,
	              datafield: 'UOMRelatedUnit_Name',
	              columntype: 'textbox',
	              width: 200
	            }, {
	              text: 'Abbreviation',
	              editable: T,
	              datafield: 'UOMRelatedUnit_Abbreviation',
	              columntype: 'textbox',
	              width: 100
	            }, {
	              text: '# of Base Unit',
	              editable: T,
	              datafield: 'UOMRelatedUnit_ConversionOfBaseUnits',
	              columntype: 'textbox',
	              width: 100
	            }]
	          });

	          // select or unselect rows when the checkbox is checked or unchecked.
	          $("#jqxUOMRelatedUnitsDropdownGrid").bind('cellendedit', function(event) {
	            if (event.args.value) {
	              $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('selectrow', event.args.rowindex);
	            } else {
	              $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('unselectrow', event.args.rowindex);
	            }
	          });
	        }
	      });
	    },
	    Back: function() {
	      $(this).dialog("close");
	      $("#divNewBaseUnitContentHolder").html('');
	      $("#divNewUnitOfMeasure").dialog("open");
	    },
	    Cancel: function() {
	      $(this).dialog("close");
	    }
	  }
	});

＆＃13;

<div id="divNewUnitOfMeasure">
  <strong>Select a Unit of Measure Type</strong>
  <br />If you don't see the Unit of Measure type you need, select Other to create a new one.
  <br />
  <div id="divNewTypeUnitContentHolder"></div>
</div>
<div id="divNewUnitOfMeasureBaseUnit">
  <strong>Select a Base Unit of Measure</strong>
  <br />
  <table style="width: 100%;">
    <tr>
      <td style="width: 100px; display: table-cell; vertical-align: top;">
        <div id="divNewBaseUnitContentHolder"></div>
      </td>
      <td style="width: 200px; display: table-cell; vertical-align: top;">
        When you create inventory items, the base unit of measure should be the smallest increment used to track the item.
        <br />
        <br />For example, if you buy screws in bags of 100 but use one or two at a time, you should select a base unit of &quot;each&quot; instead of &quot;1 bag of 100.&quot;
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

所有一起使用的单选按钮 - 也就是说，只有一个应该是可选的 - 必须具有相同的name属性。你的没有。相反，您为它们提供了相同的id属性，这会导致HTML无效。

Answer 2

我不确定，但你应该在输入广播上添加一个名字。

在这一行

$("#divNewTypeUnitContentHolder").html($("#divNewTypeUnitContentHolder").html() + '<input type="radio" id="rblUnitOfMeasureType" value="' + jsonResult.UnitOfMeasureTypeList[i].ID + '" /> ' + jsonResult.UnitOfMeasureTypeList[i].Name + ' ' + jsonResult.UnitOfMeasureTypeList[i].Description + '<br />');