使用 ID 变量访问 jQuery 中的输入元素

Question

我正在尝试根据单选按钮选择来输入所需的文本。输入文本 ID 是 Js 变量（连接到循环 var）。 我如何通过 jquery 访问它？

这是我的代码： JS：

var submyform = "<br> SubstantialOwner: <br> "
+"Personne physique <input type='radio' onclick='javascript:PPMCheck();' name='PPM[x"+$subforwhichaccount+$subcountForms+"]' id='PP[x"+$subforwhichaccount+$subcountForms+"]'> "
            +"Personne Morale  <input type='radio' onclick='javascript:PPMCheck();' name='PPM[x"+$subforwhichaccount+$subcountForms+"]' id='PM[x"+$subforwhichaccount+$subcountForms+"]' checked><br> "                 
 +"Last name (obligatoire pou les PP) :"

              +"<input type ='text' name='subln[x"+$subforwhichaccount+$subcountForms+"]'  value=''  id='ln[x"+$subforwhichaccount+$subcountForms+"]' >"

我的jquery：

 <script>
        $("#option1").click(function() {
            $("#required_later").prop("required", false);
            $("#required_later").prop("disabled", true);
        });
        $("#option2").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $("#required_later").focus();
        });
    </script>

如何通过我的收音机 id 更改“#option1”：id='PP[x"+$subforwhichaccount+$subcountForms+"]'

Answer 1

您可以更改hidden 元素属性，而不是更改readonly（或disabled）。

添加data-target-personne="NNN" 以存储数字“ID”。与使用 JS 相比，在无线电更改上，获取 .data("target-personne") 数字并使用它来处理以 _NNN 为后缀的类，即：someClassName_NNN

为您的收音机使用value 属性。比你可以检查布尔使用

this.checked && this.value === 'physique'

_实例：

const submyform = (function(n) {
  return () => {
    n++;
    return `
      <fieldset>
        <label>
          Personne Physique
          <input type="radio" name="personne_${n}" value="physique" data-target-personne="${n}">
        </label>
        <label>
          Personne Morale
          <input type="radio" name="personne_${n}" value="morale" data-target-personne="${n}" checked>
        </label>
        <br>
        <input type="text" class="physique_${n}" name="prenom_${n}" placeholder="Prénom" hidden>
        <input type="text" class="physique_${n}" name="nomdefam_${n}" placeholder="Nom de famille" hidden>
        <input type="text" class="morale_${n}" name="nom_${n}" placeholder="Nom">
        <input type="text" class="morale_${n}" name="tva_${n}" placeholder="T.V.A.">
      </fieldset>
     `;
  };
}( 0 )); // start `n` count at 0 (or use a database counter)

jQuery($ => {

  const $formulaire = $('#formulaire');
  const $inserer = $('#inserer');
  
  // Create new fields
  $inserer.on('click', (ev) => {
    ev.preventDefault();
    $formulaire.append(submyform());
  });

  // Handle fields
  $formulaire.on('change', '[data-target-personne]', function() {
  
    const n = $(this).data('target-personne');
    const $physique = $(`.physique_${n}`);
    const $morale = $(`.morale_${n}`);
    const cestPhysique = this.checked && this.value === 'physique';

    $physique.prop({
      hidden: !cestPhysique,
      required: cestPhysique
    });
    
    $morale.prop({
      hidden: cestPhysique,   // the inverse logic
      required: !cestPhysique // the inverse logic
    });

    if (!cestPhysique) $physique.val(''); // Reset inputs values
  });

});

<form id="formulaire"></form>
<button id="inserer">Insérer une personne</button>

<script src="//code.jquery.com/jquery-3.4.1.js"></script>

如果您愿意，您可以随时使用 readonly 属性而不是 hidden - 但我喜欢更简洁的 UI。