Блог

У меня есть скрипт jQuery, который должен включать связанное текстовое поле, если пользователь нажимает переключатель «да», и отключать это текстовое поле, если пользователь нажимает переключатель «нет». Проблема, с которой я сталкиваюсь, заключается в том, что каждое текстовое поле в каждой строке станет отключенным / включенным, А значение будет установлено в 0, если нажать только на первую пару переключателей «Да» / «нет».

Мне нужно выяснить, как отключить и присвоить значение 0 текстовому полю, специально связанному с назначенными ему переключателями.

Вот HTML для 3 строк примера

 Yes <input name="getFlow1" type="radio" value="1"  />
No  <input name="getFlow1" type="radio" value="0" checked />
<input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow2" type="radio" value="1"  />
No  <input name="getFlow2" type="radio" value="0" checked />
<input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow3" type="radio" value="1"  />
No  <input name="getFlow3" type="radio" value="0" checked />
<input name="enterFlowVal3" id="enterFlowVal3" value="0" size="7" type="text" disabled="disabled"/>
  

Вот jQuery, который работает в определенной степени, но ошибочен.

 $(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);
  

Лично я бы немного изменил вашу разметку, чтобы значительно упростить эту задачу. Добавление родительского тега с некоторым описанием позволяет ограничить доступные входные данные.

 <div class="option-group">
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>

<div class="option-group">
    Yes <input name="getFlow2" type="radio" value="1"  />
    No  <input name="getFlow2" type="radio" value="0" checked />
    <input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>
</div>
  

Затем в jQ:

 $(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);
  

Не могли бы вы попробовать выбрать ввод текста с помощью next ():

 $(this).click(function(){
    var zero = 0;
    $(this).next('input[type^=text]').attr('disabled','disabled');
    $(this).next('input[type^=text]').val(zero);
});
  

Не тестировал это, но что-то подобное должно применять любые изменения атрибуции только к следующему текстовому полю, а не ко всем из них.

Попробуйте

 $(this).nextAll("input[name^=enterFlowVal]").first()
  

вместо

 $("input[name^=enterFlowVal]")
  

если вы не можете изменить разметку. Если вы можете это изменить, я бы предпочел приведенные выше предложения, использующие общего предка,

Вероятно, самым простым способом сделать это было бы обернуть каждый «набор» входных данных в содержащий div, например

 <div>
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>
  

затем используйте что-то вроде

 $(document).ready(function (){  
    $("input[name^=getFlow]").(function(i){
        if (i == 1) { //the "no" radiobutton
            $(this).click(function () {
                var zero = 0;                   
                $(this).parent().children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                $(this).parent().children("input[name^=enterFlowVal]").val(zero);                       
            });
        } else {
            $(this).click(function () {
                $(this).parent("input[name^=enterFlowVal]").removeAttr("disabled");
            });
        }
    }); 

   }         
);
  

По сути, родительская функция найдет родительский элемент ввода, что должно быть идеей, которая ограничит ваш выбор только входными данными с именем enterFlowVal в этом родительском div. Возможно, вам потребуется немного изменить это.