Question

I am working on a form that gets placed inside of a system I have no control over. One stipulation of this system is that all of the Names and IDs must match.

This poses a problem with Radios since they have to have the same name in order to function, which in turn means they have to have the same ID.

Is there syntax that would allow me to access a specific radio button based on it's Value and ".disabled = true" it that way?

As these are the only 2 radios on the form I think maybe I can loop through the radio elements and use the counter variable to modify them.

Edit: I am dumb, both radios were getting disabled before submission preventing the system from saving the radio selection. So really all I need to do is disable the unchecked radio button after the verify button loses focus and the system should save the checked radio itself. I tried to use the elements loop and target the checked status to disable but it doesn't disable the unchecked radio it seems to clear them both.

Thanks and sorry,

	document.getElementById("btnVerify").onmouseleave = function(){
    var radios = document.getElementsByName('rbRadios');
		  for (var r =0; r< radios.length; r++){
	  		//radios[r].disabled = true;
	  		if(radios[r].checked = false){
	  		  radios[r].disabled = true;
			  }
		  }
  }  
  
  function enableButton(){
		document.getElementById("btnVerify").disabled=false;
	}

<input type="radio" name="rbRadios" id="rbRadios" value="Yes" onchange="enableButton()"> <label id="rbRadios">Yes</label>
<input type="radio" name="rbRadios" id="rbRadios" value="No" onchange="enableButton()"> <label id="rbRadios">No</label>

<button type="button" disabled id="btnVerify">Verify</button>

Answer 1

您应该将选择器属性选择为按值选择单选按钮，然后使用setAttribute方法检查单选按钮。

var value = "Yes";
document.querySelector('[name="rbRadio"][value="'+value+'"]').setAttribute('checked', 'checked');

<input type="radio" name="rbRadio" id="rbRadio" value="Yes">
<input type="radio" name="rbRadio" id="rbRadio" value="No">

Answer 2

如果有任何办法可以避免这种情况，你一定要重新思考它。在id s中，有一些奇怪的规则是唯一的，这些规则来自于在Mosaic浏览器时代后来保持与代码的向后兼容性。你可以得到一些非常疯狂的虫子。

但就目标使用现代最佳实践Javascript时<input>的典型行为而言，这应该可以完成工作：

只需使用checked属性（和:checked伪选择器）作为主要标识符即可获取无线电的当前值。如果您需要能够抓住特定的无线电，还可以选择添加数据属性。

const nextArrayItem = list => x => {
  const nextI = list.indexOf(x) + 1
  return list[nextI] === undefined
    ? list[0] : list[nextI]
}

const radioIds = ['a', 'b', 'c']
const nextRadioId = nextArrayItem(radioIds)

const selectNext = () => {
  const myRadios = Array.from(
    document.querySelectorAll('input#radMyRadio'))
  
  const current = myRadios.find(r => r.checked === true)
  
  // Arbitrary data attribute used to hold a unique consistent
  // value we can use to identify specific radios.
  //
  const nextId = nextRadioId(current.dataset.id)
  const next = myRadios.find(r => r.dataset.id === nextId)
  next.checked = true
}

// Grab the current value from whichever radio is checked.
//
const updateText = () => {
  const textInput = document.querySelector('input#txtRadioVal')
  const currRadio = document.querySelector('input#radMyRadio:checked')
  textInput.value = currRadio.value
}

const form = document.querySelector('form')

// Form submission will overlook your slap-in-the-face to the spec
// and just grab whichever radio has both a `name` and `checked===true`.
//
form.addEventListener('submit', evt => {
  evt.preventDefault()
  const data = Array.from(new FormData(form))
    .reduce((json, entry) => (json[entry[0]] = entry[1], json), {})
  document.querySelector('pre').innerText = JSON.stringify(data, null, 4)
  
})

setInterval(() => {
  selectNext()
  updateText()
}, 2000)

/* Use checked pseudo-selector to find active radio */
input:checked + label {
  font-weight: bold;
}

/* arbitrary data attribute allows styling specific radios */
label[data-id=a] {
  color: blue;
}

label[data-id=b] {
  color: red;
}

label[data-id=c] {
  color: green;
}

<form>
  <div>
    <input type="radio" id="radMyRadio" name="radMyRadio" value="a" data-id="a" checked="true">
    <label for="myRadio" data-id="a">A</label>

    <input type="radio" id="radMyRadio" name="radMyRadio" value="b" data-id="b">
    <label for="myRadio" data-id="b">B</label>
    
    <input type="radio" id="radMyRadio" name="radMyRadio" value="c" data-id="c">
    <label for="myRadio" data-id="c">C</label>
  </div>
  <div>
    <input type="text" id="txtRadioVal" name="txtRadioVal" value="">
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

<div id="result">
  <p>Click Submit to show current form data as JSON.</p>
  <pre />
</div>

Answer 3

我能够定位未经检查的单选按钮，并使用querySelector查找未经检查的无线电来禁用它。感谢@Azim让我走上正轨。

＆＃13;

document.getElementById("btnVerify").onmouseleave = function() {
  document.getElementById('btnVerify').disabled = true;

  document.querySelector('input[name = "rbRadios"]:not(:checked)').disabled = true;
}

function enableButton() {
  document.getElementById("btnVerify").disabled = false;
}

＆＃13;

<input type="radio" name="rbRadios" id="rbRadios" value="Yes" onchange="enableButton();">
<label id="rbRadios">Yes</label>
<input type="radio" name="rbRadios" id="rbRadios" value="No" onchange="enableButton();">
<label id="rbRadios">No</label>

<button type="button" disabled id="btnVerify">Verify</button>

＆＃13;

Disable Unchecked Radio Button with same Name AND ID

3 个答案: