Показывать текст кнопки при нажатии - PullRequest
0 голосов
/ 24 января 2019

У меня есть несколько флажков и текстовое поле кнопки.Я хочу, чтобы, если на checkbox1 нажимали, тогда должна приходить кнопка text1, а если на checkbox2 нажиматься, то должна приходить кнопка text2.

Но моя проблема в том, что когда я нажимаю на checkbox1, автоматически устанавливается значение checkbox2 (это кнопка text2).Мои коды ниже.

Мой код работает нормально, если у меня только один флажок и одна кнопка с текстом.Но я ищу флажок для нескольких полей и текст кнопки.

(function ($, $document) {

    $document.ready(function () {
        $document.on("dialog-ready", function() {
            if($("coral-checkbox[name='./includebutton'] :checked").length === 1){
            	$("input[name='./btntext']").parent().show();
                $("input[name='./link']").parent().show();
                $("coral-select[name='./btnstyle']").parent().show();
             } else {
            	$("input[name='./btntext']").parent().hide();
                $("input[name='./link']").parent().hide();
                $("coral-select[name='./btnstyle']").parent().hide();
             }

            $("coral-checkbox[name='./includebutton']").on("click", function() {
            	 if($("coral-checkbox[name='./includebutton'] :checked").length === 1){
            		$("input[name='./btntext']").parent().show();
                    $("input[name='./link']").parent().show();
                    $("coral-select[name='./btnstyle']").parent().show();
                 } else {
                	$("input[name='./btntext']").parent().hide();
                    $("input[name='./link']").parent().hide();
                    $("coral-select[name='./btnstyle']").parent().hide();
                 }
            }); 
        });

	});
}(jQuery, jQuery(document)));
<coral-checkbox name="./includebutton" value="true" checked="" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false">
<input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-712" value="true" name="./includebutton">
<span class=" coral3-Checkbox-checkmark" handle="checkbox"></span>
<label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-712">
<coral-checkbox-label>Add button (bottom)</coral-checkbox-label>
</label>
</coral-checkbox>

<div class="coral-Form-fieldwrapper"><label id="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-716" aria-labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" aria-invalid="false"></div>


<coral-checkbox name="./includebutton" value="true" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false"><input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-726" value="true" name="./includebutton">
<span class=" coral3-Checkbox-checkmark" handle="checkbox"></span>
<label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-726">
<coral-checkbox-label>Add button (bottom)</coral-checkbox-label>
</label>
</coral-checkbox>

<div class="coral-Form-fieldwrapper"><label id="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-730" aria-labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" aria-invalid="false"></div>

введите описание изображения здесь

1 Ответ

0 голосов
/ 24 января 2019

Вам нужно что-то простое, например:

//For the Load purpose
$("coral-checkbox[name='./includebutton']").each(function() {
  toogleDiv($(this));
});

//For the Click purpose
$("coral-checkbox[name='./includebutton']").on("click", function() {
  toogleDiv($(this));
});

function toogleDiv(_this) {
  var related_div = _this.next('div');

  if ($(':checkbox', _this).is(":checked")) {
    related_div.show();
  } else {
    related_div.hide();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<coral-checkbox name="./includebutton" value="true" checked="" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false">
  <input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-712" value="true" name="./includebutton">
  <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span>
  <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-712">
<coral-checkbox-label>Add button (bottom)</coral-checkbox-label>
</label>
</coral-checkbox>

<div class="coral-Form-fieldwrapper">
  <label id="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" class="coral-Form-fieldlabel">Button Text</label>
  <input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-716" aria-labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84"
    aria-invalid="false"></div>

<br>
<coral-checkbox name="./includebutton" value="true" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false">
  <input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-726" value="true" name="./includebutton">
  <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span>
  <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-726">
<coral-checkbox-label>Add button (bottom)</coral-checkbox-label>
</label>
</coral-checkbox>

<div class="coral-Form-fieldwrapper"><label id="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" data-foundation-validation=""
    data-validation="" is="coral-textfield" id="coral-id-730" aria-labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" aria-invalid="false"></div>
...