Выбор radio input + text input

@andrei24 · Регистрация: 05.07.2015

Author24 — интернет-сервис помощи студентам

Всем привет. Никак не могу решить задачу. Суть такая: на странице динамически создаются группы по 3 радио баттона + 1 селект и 1 просто инпут текст (групп может быть сколько угодно)

Нужно сделать что бы когда у первой группы к примеру выбран 1 радиобаттон, то у селекта и инпута у этой группы добавляется свойство disabled, если выбран 2 радиобаттон, то селект свойство disabled убирается, а у инпута добавляется disabled.

HTML5

<div class="row-fluid control-group">
                        <div class="radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio0"
                                   checked="checked"> Disabled
                            <label class="radio" for="addressRadio0"></label>
                        </div>
                        <div class="span7 pull-left radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio1"> Choose address
                            <label class="radio" for="addressRadio1"></label>
 
                            <div class="input-append">
                                <select name="meetingPointLocation[]" id="meetingPointLocation">
                                        <option disabled selected value="0">Choose</option>
                                        <option value="1">1</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="span5 radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio2">
                            Enter address
                            <label class="radio" for="addressRadio2"></label>
 
                            <div class="input-append">
                                <input type="text" name="meetingPointLocation[]" id="meetingPointLocation2"
                                       class="input-small percent" placeholder="enter amount"
                                       style="width: 50%">
                            </div>
                        </div>
                    </div>

Javascript

$('input[name^="addressCheck"]').on('click', function () {
        //if($(this).first().next().attr('disabled') == 'disabled'){
        //    $('#meetingPointLocation2').attr('disabled', 'disabled');
        //    $('#meetingPointLocation').attr('disabled', null);
        //}
        $(this).closest(".control-group").find('[name^="meetingPointLocation"]').attr('disabled', 'disabled');
        $(this).closest(".control-group").find('[name^="meetingPointLocation"]').next().attr('disabled', null);
        console.log();
        //$('#meetingPointLocation').attr('disabled', 'disabled');
        //$('#meetingPointLocation2').attr('disabled', 'disabled');
    });

@andrei24 · 04.01.2016, 18:07 **[ТС]**

Задача актуальна

@ArtFeather · 04.01.2016, 21:56

Грубо

Javascript

if ('#radiobutton-1').prop("checked")
{
  $('#input-2').prop('disabled',false);
  $('#input-1').prop('disabled','disabled');
  $('#select-2').prop('disabled',false);
  $('#select-1').prop('disabled','disabled');
}

@andrei24 · 04.01.2016, 22:03 **[ТС]**

Сообщение от ArtFeather

Грубо

Javascript

if ('#radiobutton-1').prop("checked")
{
  $('#input-2').prop('disabled',false);
  $('#input-1').prop('disabled','disabled');
  $('#select-2').prop('disabled',false);
  $('#select-1').prop('disabled','disabled');
}

Сразу так и было сделано, но проблема в том: что на странице есть кнопка + при нажатии на которую создается новая группа из 3 чекбоксов и меняется имя у инпутов.
То есть к примеру у нас 2 группы чекбоксов:

HTML5

<div class="row-fluid control-group">
                        <div class="radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio0"
                                   checked="checked"> Disabled
                            <label class="radio" for="addressRadio0"></label>
                        </div>
                        <div class="span7 pull-left radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio1"> Choose address
                            <label class="radio" for="addressRadio1"></label>
 
                            <div class="input-append">
                                <select name="meetingPointLocation[]" id="meetingPointLocation">
                                        <option disabled selected value="0">Choose</option>
                                        <option value="1">1</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="span5 radio">
                            <input type="radio" name="addressCheck[]" id="addressRadio2">
                            Enter address
                            <label class="radio" for="addressRadio2"></label>
 
                            <div class="input-append">
                                <input type="text" name="meetingPointLocation[]" id="meetingPointLocation2"
                                       class="input-small percent" placeholder="enter amount"
                                       style="width: 50%">
                            </div>
                        </div>
                    </div>
<div class="row-fluid control-group">
                        <div class="radio">
                            <input type="radio" name="addressCheck[1]" id="addressRadio0[1]"
                                   checked="checked"> Disabled
                            <label class="radio" for="addressRadio0[1]"></label>
                        </div>
                        <div class="span7 pull-left radio">
                            <input type="radio" name="addressCheck[1]" id="addressRadio1[1]"> Choose address
                            <label class="radio" for="addressRadio1[1]"></label>
 
                            <div class="input-append">
                                <select name="meetingPointLocation[1]" id="meetingPointLocation">
                                        <option disabled selected value="0">Choose</option>
                                        <option value="1">1</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="span5 radio">
                            <input type="radio" name="addressCheck[1]" id="addressRadio2[1]">
                            Enter address
                            <label class="radio" for="addressRadio2[1]"></label>
 
                            <div class="input-append">
                                <input type="text" name="meetingPointLocation[1]" id="meetingPointLocation2[1]"
                                       class="input-small percent" placeholder="enter amount"
                                       style="width: 50%">
                            </div>
                        </div>
                    </div>

То есть при нажатии на + на странице добавляется группа чекбоксов и у них увеличивается на 1 name и id (
addressCheck[0]
addressCheck[1]
addressCheck[2]
)
И уже выходит что "грубый" метод не подходит, нужно что то универсальное, но можно что бы было привязано именно к этому коду.

@ArtFeather · 04.01.2016, 22:25

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

@andrei24 · 04.01.2016, 22:30 **[ТС]**

Сообщение от ArtFeather

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

Вот на деле и не выходит это сделать. Да и как проверять их состояние если имена все разные и какие блокировать, а какие нет тоже не известно

@ArtFeather · 05.01.2016, 14:41

Javascript

    $('input[type="radio"]').on('click',function() {
        var fparent = $(this).parent();
        var sparent = $(this).parent().parent();
            if ($(fparent).prop('class') == 'radio')
            {
                $(sparent).find('.input-append select').prop('disabled','disabled');
                $(sparent).find('.input-append input[type="text"]').prop('disabled','disabled');
            }
            else
                if ($(fparent).prop('class') == 'span7 pull-left radio')
                {
                $(sparent).find('.input-append select').prop('disabled',false);
                $(sparent).find('.input-append input[type="text"]').prop('disabled','disabled');                    
                }
            else
            {
                    $(sparent).find('.input-append select').prop('disabled','disabled');
                    $(sparent).find('.input-append input[type="text"]').prop('disabled',false);             
            }
    });

@andrei24 0 / 0 / 1 Регистрация: 05.07.2015 Сообщений: 50
	04.01.2016, 18:07 [ТС]	2
	Задача актуальна 0

@ArtFeather 14 / 14 / 13 Регистрация: 04.06.2015 Сообщений: 85
	04.01.2016, 22:25	5
	Получить все количество radio на странице, пройтись циклом, проверить их состояние, изменить состояние других необходимых элементов. 0

@andrei24 0 / 0 / 1 Регистрация: 05.07.2015 Сообщений: 50
	04.01.2016, 22:30 [ТС]	6
	Сообщение от ArtFeather Получить все количество radio на странице, пройтись циклом, проверить их состояние, изменить состояние других необходимых элементов. Вот на деле и не выходит это сделать. Да и как проверять их состояние если имена все разные и какие блокировать, а какие нет тоже не известно 0

	05.01.2016, 14:41

Выбор radio input + text input

Решение